/**
 * 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,
button.save-to-wishlist-cart-button {
    padding: var(--padding-vertical, 3px) var(--padding-horizontal, 8px);
    margin: 5px 0;
    white-space: nowrap;
}

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;
}

/* 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;
}

/* 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 often wrap onto separate rows, and the
       merchant gap then indents the wishlist button with nothing above it to
       line up against. Fall back to the 8px floor the setting's description
       promises for touch targets instead of removing the gap.
       !important is needed because the merchant value is written inline. */
    .stw-wishlist-button-container.stw-wishlist-button-placement-inline_cart {
        margin-left: 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;
    }
}