button.save-to-wishlist-button,
button.save-to-wishlist-cart-button {
    padding: var(--padding-vertical, 3px) var(--padding-horizontal, 8px);
    white-space: nowrap;
    margin: 5px 0;
    font-size: 12px;
}

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) {
    background: none !important;
    border: none !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

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-heart.hover-icon,
button.save-to-wishlist-cart-button .stw-icon-heart.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 {
    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 {
    display: none;
}

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-solid.hover-icon,
button.save-to-wishlist-cart-button .stw-icon-solid.hover-icon {
    display: none;
}

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 {
    display: inline-block;
}

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 {
    display: none;
}

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

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

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

/* The same WooCommerce rule also declares `display: block`, which beats the family swap rules
   above and leaves BOTH states visible at once on archive listings. Restate the swap with the
   `img` type selector so an uploaded icon keeps the one-icon-at-a-time behaviour. */
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;
    }
}

.stw-wishlist-button-style-icon_and_text,
.stw-wishlist-button-style-solid_and_text,
.stw-wishlist-button-style-minimal_and_text {
    background: none;
    border: none;
    outline: none !important;
    border-radius: var(--border-radius, 4px);
}

.stw-wishlist-button-style-icon_and_text:hover,
.stw-wishlist-button-style-icon_and_text.stw-active,
.stw-wishlist-button-style-solid_and_text:hover,
.stw-wishlist-button-style-solid_and_text.stw-active,
.stw-wishlist-button-style-minimal_and_text:hover,
.stw-wishlist-button-style-minimal_and_text.stw-active {
    background: var(--hover-background-color) !important;
    color: var(--hover-text-color) !important;
}

.stw-wishlist-button-style-text_only,
.stw-wishlist-button-style-icon_and_text_pill,
.stw-wishlist-button-style-solid_and_text_pill,
.stw-wishlist-button-style-minimal_and_text_pill {
    background: none;
    border: var(--border-width) solid var(--hover-border-color);
    outline: none !important;
    border-radius: var(--border-radius, 16px) !important;
}

.stw-wishlist-button-style-text_only:hover,
.stw-wishlist-button-style-text_only.stw-active,
.stw-wishlist-button-style-icon_and_text_pill:hover,
.stw-wishlist-button-style-icon_and_text_pill.stw-active,
.stw-wishlist-button-style-solid_and_text_pill:hover,
.stw-wishlist-button-style-solid_and_text_pill.stw-active,
.stw-wishlist-button-style-minimal_and_text_pill:hover,
.stw-wishlist-button-style-minimal_and_text_pill.stw-active {
    color: var(--hover-text-color) !important;
    background: var(--hover-background-color) !important;
    border-color: var(--hover-border-color) !important;
}

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

span.stw-text-label {
    font-weight: 400;
    font-size: var(--text-size);
    font-style: var(--text-style);
    line-height: 1;
}

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 {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

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

/* Style in product page */
.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;
    text-align: center;
    top: .5rem;
    left: .5rem;
    margin: 0;
}

/* Per-product wishlist button in cart */
[class*="stw-wishlist-button-placement-cart_item"] {
    margin-top: 0.5rem;
    display: block;
    width: 100%;
    position: relative; /* Anchor the choose-list popup below the button */
}

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


/**
 * SaveTo Wishlist Modal.
 *
 * This file contains the styles for the SaveTo Wishlist modal.
 *
 * @package SaveToWishlist
 * @since 1.0.0
 */
.stw-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.stw-modal-content {
    background-color: #fefefe;
    margin: 15% auto 0;
    border: 1px solid #888;
    width: 80%;
    max-width: 350px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.stw-modal-header {
    padding: 2px 16px;
    background-color: #f6646a;
    color: #ffffff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

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

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

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

.stw-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.stw-close:hover,
.stw-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.stw-modal-button {
    background-color: #f6646a;
    color: #ffffff;
    padding: 5px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    border-radius: 3px;
}

.stw-modal-button:hover {
    opacity: 1;
}

/* Typography/background for the multi-list popup inside the Fast Cart popup
   (`aside.wc-fast-cart`). `!important` guards against Fast Cart's own popup
   styles bleeding into ours; scoped to `.wc-fast-cart` so themes and Full
   styling mode keep control everywhere else. */
.wc-fast-cart .save-to-wishlist-multiple-lists-container,
.wc-fast-cart .save-to-wishlist-multiple-lists-button,
.wc-fast-cart .save-to-wishlist-multiple-lists-button-content select {
    background-color: white !important;
    color: #1F2937 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

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

.save-to-wishlist-multiple-lists-container {
    padding: 12px 18px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    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;
}

.save-to-wishlist-multiple-lists-button {
    font-size: 12px;
}

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

.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;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
}

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

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

/* Establish a positioning context for the absolute-positioned multi-list dropdown
   on placements that do not already position themselves. The image-overlay
   placements (top_right, top_left, top_image_right, top_image_left) are already
   position: absolute and anchor the dropdown natively, so they're excluded. */
.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;
}

/* Fade notification */
.stw-fade-notification {
    display: none;
    background-color: #27ae60;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 6px 12px;
    border-radius: 4px;
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.35);
}

/* Failed save — the product was not added and the customer should retry. */
.stw-fade-notification.stw-fade-notification-error {
    background-color: #c0392b;
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.35);
}

/* Add responsiveness - will stack on top of each other on small screens */
@media screen and (max-width: 600px) {
    .stw-modal-content {
        margin: 5% auto;
        width: 95%;
    }
}

/* ── Mobile: Choose-list bottom sheet ────────────────────────────────────
   Only targets touch-primary devices (phones/tablets). Desktop is unchanged.
   ─────────────────────────────────────────────────────────────────────── */
@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;
    }

    /* Disable CSS hover-triggered popup — hover doesn't exist on touch */
    .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;
    }

    /* Semi-transparent backdrop behind the bottom sheet */
    .stw-mobile-lists-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 99998;
        -webkit-tap-highlight-color: transparent;
    }

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

    /* Bottom-sheet popup */
    .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;
        border-radius: 16px 16px 0 0 !important;
        padding: 8px 24px 32px !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18) !important;
    }

    /* Drag handle — visual affordance */
    .save-to-wishlist-multiple-lists-container.stw-multiple-lists-open::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 8px auto 16px;
    }

    /* Larger label text inside the sheet */
    .save-to-wishlist-multiple-lists-container.stw-multiple-lists-open .save-to-wishlist-multiple-lists-button {
        font-size: 15px;
        font-weight: 600;
    }

    /* font-size >= 16px prevents iOS Safari from auto-zooming on select focus */
    .save-to-wishlist-multiple-lists-container.stw-multiple-lists-open .save-to-wishlist-multiple-lists-button-content select {
        font-size: 16px;
        padding: 10px 8px;
    }
}