/**
 * SaveTo Wishlist — Positions & Sizes Frontend Stylesheet.
 *
 * Loaded when the "Frontend CSS Loading" setting is "none".
 * Preserves only the rules needed to keep the wishlist UI functional:
 * button sizes (padding, margin, dimensions), button placement
 * anchors, icon dimensions, modal/dropdown positioning, and the
 * show/hide state classes that drive interactive behavior.
 *
 * Text colors, button colors, borders, backgrounds, fonts and other
 * decorative properties are intentionally omitted — the active theme
 * is fully responsible for visual styling.
 */

/* Button sizes — padding, margin, white-space wrapping. */
button.save-to-wishlist-button:not(.stw-theme-default),
button.save-to-wishlist-cart-button:not(.stw-theme-default) {
    padding: var(--padding-vertical, 3px) var(--padding-horizontal, 8px);
    margin: 5px 0;
    white-space: nowrap;
}

button.save-to-wishlist-button.stw-theme-default,
button.save-to-wishlist-cart-button.stw-theme-default {
    white-space: nowrap;
    margin: 5px 0;
}

button.save-to-wishlist-button .stw-icon {
    margin-right: 5px;
}

button.save-to-wishlist-button.stw-wishlist-button-style-icon_only:not(.stw-theme-default),
button.save-to-wishlist-button.stw-wishlist-button-style-solid_icon:not(.stw-theme-default),
button.save-to-wishlist-button.stw-wishlist-button-style-minimal_icon:not(.stw-theme-default) {
    padding: 0;
    margin: 0;
}

/* Icon dimensions — required so background-image icons render at a visible size. */
button.save-to-wishlist-button .stw-icon-heart,
button.save-to-wishlist-cart-button .stw-icon-heart {
    width: var(--icon-size, 20px);
    height: var(--icon-size, 20px);
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

button.save-to-wishlist-button .stw-icon-solid,
button.save-to-wishlist-cart-button .stw-icon-solid {
    width: var(--icon-size, 20px);
    height: var(--icon-size, 20px);
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

button.save-to-wishlist-button .stw-icon-minimal,
button.save-to-wishlist-cart-button .stw-icon-minimal {
    width: var(--icon-size, 20px);
    height: var(--icon-height, 25px);
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

/* Uploaded custom icons keep their own aspect ratio inside the icon box, and use the
   square icon-size box in every family — including `minimal`, whose taller box exists
   for the built-in save-bag artwork the upload replaces. */
/* The `img` type selector is load-bearing: WooCommerce core ships
   `.woocommerce ul.products li.product a img { width: 100% }` (0,3,4), which outranks a
   class-only selector here (0,3,1) and stretches the upload to the product card's width on
   every shop/archive listing. The built-in glyphs are `svg` and never match that rule. */
button.save-to-wishlist-button img.stw-icon.stw-icon-shape-custom,
button.save-to-wishlist-cart-button img.stw-icon.stw-icon-shape-custom {
    width: var(--icon-size, 20px) !important;
    height: var(--icon-size, 20px) !important;
    max-width: var(--icon-size, 20px);
    object-fit: contain;
    /* Themes routinely give content images a bottom margin, which would push the icon
       off the button's text baseline. The built-in glyphs are SVG and never inherit it. */
    margin-bottom: 0;
}

/* Icon hover/active swap — functional behavior, no colors. */
button.save-to-wishlist-button .stw-icon-heart.hover-icon,
button.save-to-wishlist-cart-button .stw-icon-heart.hover-icon,
button.save-to-wishlist-button .stw-icon-solid.hover-icon,
button.save-to-wishlist-cart-button .stw-icon-solid.hover-icon,
button.save-to-wishlist-button .stw-icon-minimal.hover-icon,
button.save-to-wishlist-cart-button .stw-icon-minimal.hover-icon {
    display: none;
}

button.save-to-wishlist-button:hover .stw-icon-heart.hover-icon,
button.save-to-wishlist-button.stw-active .stw-icon-heart.hover-icon,
button.save-to-wishlist-cart-button:hover .stw-icon-heart.hover-icon,
button.save-to-wishlist-button:hover .stw-icon-solid.hover-icon,
button.save-to-wishlist-button.stw-active .stw-icon-solid.hover-icon,
button.save-to-wishlist-cart-button:hover .stw-icon-solid.hover-icon,
button.save-to-wishlist-button:hover .stw-icon-minimal.hover-icon,
button.save-to-wishlist-button.stw-active .stw-icon-minimal.hover-icon,
button.save-to-wishlist-cart-button:hover .stw-icon-minimal.hover-icon {
    display: inline-block;
}

button.save-to-wishlist-button:hover .stw-icon-heart.selected-icon,
button.save-to-wishlist-button.stw-active .stw-icon-heart.selected-icon,
button.save-to-wishlist-cart-button:hover .stw-icon-heart.selected-icon,
button.save-to-wishlist-button:hover .stw-icon-solid.selected-icon,
button.save-to-wishlist-button.stw-active .stw-icon-solid.selected-icon,
button.save-to-wishlist-cart-button:hover .stw-icon-solid.selected-icon,
button.save-to-wishlist-button:hover .stw-icon-minimal.selected-icon,
button.save-to-wishlist-button.stw-active .stw-icon-minimal.selected-icon,
button.save-to-wishlist-cart-button:hover .stw-icon-minimal.selected-icon {
    display: none;
}

/* The WooCommerce archive rule `.woocommerce ul.products li.product a img` (0,3,4) also
   declares `display: block`, beating the class-only swap rules above and leaving BOTH states
   visible at once. Restate the swap with the `img` type selector for uploaded icons. */
button.save-to-wishlist-button img.stw-icon.stw-icon-shape-custom.hover-icon,
button.save-to-wishlist-cart-button img.stw-icon.stw-icon-shape-custom.hover-icon {
    display: none;
}

button.save-to-wishlist-button:hover img.stw-icon.stw-icon-shape-custom.hover-icon,
button.save-to-wishlist-button.stw-active img.stw-icon.stw-icon-shape-custom.hover-icon,
button.save-to-wishlist-cart-button:hover img.stw-icon.stw-icon-shape-custom.hover-icon {
    display: inline-block;
}

button.save-to-wishlist-button:hover img.stw-icon.stw-icon-shape-custom.selected-icon,
button.save-to-wishlist-button.stw-active img.stw-icon.stw-icon-shape-custom.selected-icon,
button.save-to-wishlist-cart-button:hover img.stw-icon.stw-icon-shape-custom.selected-icon {
    display: none;
}

/* An uploaded icon is the same artwork in both states — one image stands in for a glyph pair
   that normally differs in shape — so without a treatment here the hover and saved states are
   indistinguishable from the resting one. That matters most for `icon_only` / `solid_icon`,
   where the icon IS the button and there is no background or label to carry the change. Scale
   rather than colour: an `img` takes no `fill`, and colour alone would still read as identical
   artwork to anyone who cannot tell the two apart. */
button.save-to-wishlist-button:hover img.stw-icon.stw-icon-shape-custom.hover-icon,
button.save-to-wishlist-button.stw-active img.stw-icon.stw-icon-shape-custom.hover-icon,
button.save-to-wishlist-cart-button:hover img.stw-icon.stw-icon-shape-custom.hover-icon {
    transform: scale(1.15);
}

/* Motion is decorative here; the scale still applies, it just arrives instantly. */
@media (prefers-reduced-motion: no-preference) {
    button.save-to-wishlist-button img.stw-icon.stw-icon-shape-custom,
    button.save-to-wishlist-cart-button img.stw-icon.stw-icon-shape-custom {
        transition: transform 0.15s ease-in-out;
    }
}

span.stw-icon-wrapper {
    display: flex;
    align-items: center;
}

/* Disabled adding/removing state — sizing/cursor cue, no colors. */
button.save-to-wishlist-button.stw-adding,
button.save-to-wishlist-cart-button.stw-adding,
button.save-to-wishlist-button.stw-removing,
button.save-to-wishlist-cart-button.stw-removing {
    cursor: not-allowed;
}

/* Button placement anchors. */
.stw-wishlist-button-placement-top_right {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

.stw-wishlist-button-placement-top_left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

.stw-wishlist-button-placement-top_image_right {
    position: absolute;
    top: 10px;
    right: 10px;
}

.stw-wishlist-button-placement-top_image_left {
    position: absolute;
    min-height: 0;
    min-width: 0;
    top: .5rem;
    left: .5rem;
    margin: 0;
}

[class*="stw-wishlist-button-placement-cart_item"] {
    margin-top: 0.5rem;
    display: block;
    width: 100%;
    position: relative;
}

.stw-wishlist-button-cart {
    display: flex;
    align-items: center;
    justify-content: end;
}

.wc-block-product-template .wc-block-product {
    position: relative;
}

.stw-wishlist-button-container {
    z-index: 10;
}

.stw-wishlist-button-container.stw-wishlist-button-placement-above_title,
.stw-wishlist-button-container.stw-wishlist-button-placement-below_title,
.stw-wishlist-button-container.stw-wishlist-button-placement-above_button,
.stw-wishlist-button-container.stw-wishlist-button-placement-below_button,
.stw-wishlist-button-container.stw-wishlist-button-placement-top_cart,
.stw-wishlist-button-container.stw-wishlist-button-placement-bottom_cart,
.stw-wishlist-button-container.stw-wishlist-button-placement-inline_cart,
.stw-wishlist-button-container.stw-wishlist-button-placement-top_title,
.stw-wishlist-button-container.stw-wishlist-button-placement-bottom_title,
.stw-wishlist-button-container.stw-wishlist-button-placement-barn2_table {
    position: relative;
}

/* Elementor widget placement. The widget wrapper carries the alignment as
   `text-align`, so the container must be inline-block to move with it, and it
   must be the positioning context for the absolute multi-list dropdown. A
   full-width block container would anchor the dropdown to that ancestor's left
   edge, which detaches it from the button on Center and Right alignment. */
.stw-wishlist-button-container.stw-wishlist-button-placement-elementor_widget {
    position: relative;
    display: inline-block;
}

/* Premium Addons grid card, corner placements. Premium Addons exposes no
   action inside its image wrapper, so Top Right / Top Left fall back to the
   top of the card details block, in flow (board decision, issue #393). PA's
   `.premium-woo-product-wrapper` is not a positioning context, so the
   corner placement's own `position: absolute` would escape the card instead
   of sitting at the top of it — this neutralises that for a container
   injected into PA's details wrap. */
.premium-woo-products-details-wrap .stw-wishlist-button-container.stw-wishlist-button-placement-top_right,
.premium-woo-products-details-wrap .stw-wishlist-button-container.stw-wishlist-button-placement-top_left {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
}

/* Ultimate Store Kit card action row, corner placements. The integration
   appends the button to the `.usk-shoping` icon row, its only anchor, so the
   corner placement's own `position: absolute` would pull it out of the row and
   over Ultimate Store Kit's icons. Keep it in the row (issue #401). */
.usk-shoping .stw-wishlist-button-container.stw-wishlist-button-placement-top_right,
.usk-shoping .stw-wishlist-button-container.stw-wishlist-button-placement-top_left {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
}

/* Ultimate Store Kit prints the button before `.usk-shoping` in the Shiny Grid,
   Shiny Carousel and Image Hotspot cards, and inside the Mentor Slider's action
   column, so a corner placement sat over the Quick View or Cart icon, or the "New"
   badge. Shiny and Hotspot: keep the button at Ultimate Store Kit's own corner
   offset and move its icon column or badge stack below the button. Mentor: keep the
   button in the icon column. Showcase: clear the badge (issue #401). */
.usk-shiny-grid .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right,
.usk-shiny-carousel .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right,
.usk-image-hotspot-main .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right,
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right {
    top: clamp(10px, 1vw, 25px);
    right: clamp(10px, 1vw, 25px);
    z-index: 3;
}

.usk-shiny-grid .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left,
.usk-shiny-carousel .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left,
.usk-image-hotspot-main .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left,
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left {
    top: clamp(10px, 1vw, 25px);
    left: clamp(10px, 1vw, 25px);
    z-index: 3;
}

.usk-shiny-grid .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right ~ .usk-shoping,
.usk-shiny-carousel .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right ~ .usk-shoping,
.usk-image-hotspot-main .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right ~ .usk-shoping,
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_right ~ .usk-shoping {
    margin-top: 31px;
}

.usk-shiny-grid .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left ~ .usk-badge-label-wrapper,
.usk-shiny-carousel .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left ~ .usk-badge-label-wrapper,
.usk-image-hotspot-main .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left ~ .usk-badge-label-wrapper,
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-image > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left ~ .usk-badge-label-wrapper {
    margin-top: calc(clamp(10px, 1vw, 25px) + 31px);
}

.usk-mentor-slider .usk-action-btn-wrap .stw-wishlist-button-container.stw-wishlist-button-placement-top_right,
.usk-mentor-slider .usk-action-btn-wrap .stw-wishlist-button-container.stw-wishlist-button-placement-top_left {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin-top: 5px;
}

.usk-showcase-slider .usk-image-wrap > .stw-wishlist-button-container.stw-wishlist-button-placement-top_left {
    left: 0;
}

/* Right-aligned widget: open the dropdown from the button's right edge so it
   does not run past the edge of the page. */
.stwlite-elementor-widget-align-right .save-to-wishlist-multiple-lists-container {
    right: 0;
    left: auto;
}

/* Inline-with-Add-to-Cart placement: sits beside the Add to Cart button rather
   than below it. The Add to Cart button is inline-block by default in WooCommerce,
   so matching the display + a vertical-align keeps both buttons on the same row.
   A 16px gap keeps the two actions comfortably apart and stays proportionate
   when the button inherits the theme's larger Add to Cart sizing. */
.stw-wishlist-button-container.stw-wishlist-button-placement-inline_cart {
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
}

/* Form-less products: WooCommerce renders no add-to-cart form at all for a product
   with no price, a catalog-mode product, or a product that is otherwise not
   purchasable. The wishlist button still reaches the page, through
   Buttons::show_button_on_product_page_no_form_fallback() on
   `woocommerce_single_product_summary`, but it now sits alone in the product summary
   with nothing to its left, so the gap above indents it for no visible reason (#372).
   The selector asks the page the same question the fallback answers: is there an
   add-to-cart control in this product summary at all? `:not(:has(form.cart))` covers
   WooCommerce's own templates, which always wrap the button in that form. The second
   `:not()` is the belt to that braces: a theme or a catalog-mode plugin can fire
   `woocommerce_after_add_to_cart_button` from its own wrapper instead, and there a
   purchasable product would otherwise lose the gap it should keep. A control carrying
   neither marker — a quote plugin with entirely custom markup — still reads as form-less
   and is the known limit of a CSS-only rule. !important is needed because
   Buttons::button_container_spacing_attr() writes the merchant value inline. No media
   query: a form-less product looks the same on every input device.
   Kept as its own rule rather than folded into a selector list, because an engine
   without `:has()` drops the whole rule it cannot parse, and there it must lose only
   this override, never the base placement rule above. */
div.summary:not(:has(form.cart)):not(:has(.single_add_to_cart_button)) .stw-wishlist-button-container.stw-wishlist-button-placement-inline_cart {
    margin-left: 0 !important;
}

/* Modal — positioning + sizing only. */
.stw-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.stw-modal-content {
    margin: 15% auto 0;
    width: 80%;
    max-width: 350px;
}

.stw-modal-header {
    padding: 2px 16px;
}

.stw-modal-body {
    padding: 40px 16px 20px;
}

.stw-modal-body p {
    margin: 0;
}

.stw-modal-footer {
    padding: 0 16px 20px;
}

.stw-close {
    float: right;
}

.stw-modal-button {
    padding: 5px 20px;
    width: 100%;
    cursor: pointer;
}

/* Anchor for the choose-list dropdown. The anchor is inline-block, so it
   shrinks to the wishlist button and gives the absolute dropdown a positioning
   context of the button's own size. A full-width container would anchor the
   dropdown to that container's left edge, which detaches it from the button
   whenever the theme centers or right-aligns the button. */
.stw-wishlist-button-anchor {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Multi-list dropdown — positioning + sizing + show/hide states. */
.save-to-wishlist-multiple-lists-container {
    padding: 12px 18px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s ease;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 150px;
}

.stw-wishlist-button-placement-top_right .save-to-wishlist-multiple-lists-container,
.stw-wishlist-button-placement-top_image_right .save-to-wishlist-multiple-lists-container {
    right: 0;
    left: auto;
}

.stw-wishlist-button-container:hover .save-to-wishlist-multiple-lists-container,
.save-to-wishlist-multiple-lists-container:hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.save-to-wishlist-multiple-lists-container.stw-multiple-lists-hidden {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
}

.save-to-wishlist-button.stw-active+.save-to-wishlist-multiple-lists-container {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
}

.save-to-wishlist-multiple-lists-button-content {
    margin-top: 5px;
}

.save-to-wishlist-multiple-lists-button-content select {
    width: 100%;
    padding: 5px;
    cursor: pointer;
}

.stw-wishlist-button-container.stw-wishlist-button-placement-above_title,
.stw-wishlist-button-container.stw-wishlist-button-placement-below_title,
.stw-wishlist-button-container.stw-wishlist-button-placement-above_button,
.stw-wishlist-button-container.stw-wishlist-button-placement-below_button {
    text-align: center;
}

/* Fade notification — sizing only, JS toggles display. */
.stw-fade-notification {
    display: none;
    padding: 6px 12px;
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .stw-modal-content {
        margin: 5% auto;
        width: 95%;
    }
}

/* Mobile bottom-sheet — functional touch behavior + sizing. */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices: the two buttons can wrap onto separate rows, and a large
       merchant gap then indents the wishlist button with nothing above it to
       line up against. Floor the gap at the 8px the setting's description
       promises for touch targets, rather than replacing it — pinning it to a
       flat 8px discarded every configured value above 8 (#371).
       `--stw-button-spacing` is written inline next to the margin by
       Buttons::button_container_spacing_attr(). !important is needed because
       the merchant value is written inline.
       The plain 8px declaration in front is the fallback for engines without
       CSS max(), and for a site whose kses filter strips the custom property:
       either way the gap holds at the historical floor instead of collapsing. */
    .stw-wishlist-button-container.stw-wishlist-button-placement-inline_cart {
        margin-left: 8px !important;
        margin-left: max(8px, var(--stw-button-spacing, 8px)) !important;
    }

    .stw-wishlist-button-container:hover .save-to-wishlist-multiple-lists-container,
    .save-to-wishlist-multiple-lists-container:hover {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    .stw-mobile-lists-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99998;
        -webkit-tap-highlight-color: transparent;
    }

    .stw-mobile-lists-backdrop.stw-active {
        display: block;
    }

    .save-to-wishlist-multiple-lists-container.stw-multiple-lists-open {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
        padding: 8px 24px 32px !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
    }

    .save-to-wishlist-multiple-lists-container.stw-multiple-lists-open .save-to-wishlist-multiple-lists-button-content select {
        padding: 10px 8px;
    }
}

/* Quick view modal (issue #398): the image is outside the button's column,
   so the image placements flow with the content instead of overlaying. */
#wqv-quick-view-content .stw-wishlist-button-placement-top_image_right,
#wqv-quick-view-content .stw-wishlist-button-placement-top_image_left {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    margin: 0 0 10px;
}