/**
 * SaveTo Wishlist — Minimal Frontend Stylesheet.
 *
 * Loaded when the "Frontend CSS Loading" setting is "minimal".
 * Identical in scope to the full stylesheet — sizes, positions,
 * colors and fonts are all present so the wishlist UI still has a
 * sensible default look — but the `!important` flags on decorative
 * properties (background, color, border, outline, border-radius)
 * are removed so the active theme's CSS can win the cascade.
 *
 * `!important` is kept only on state-control properties (opacity,
 * transform, pointer-events on hidden/active/open classes) because
 * those drive functional show/hide behavior, not visual styling.
 */

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;
    border: none;
    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;
    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);
    color: var(--hover-text-color);
}

.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;
    border-radius: var(--border-radius, 16px);
}

.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);
    background: var(--hover-background-color);
    border-color: var(--hover-border-color);
}

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;
    cursor: not-allowed;
}

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

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

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

/* Modal */
.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: 0 16px 20px;
}

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

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

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

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

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

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

/* Mobile bottom-sheet — `!important` is kept on state-control properties
   so the JS-driven open state can override the default hover popup. */
@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;
        background: rgba(0, 0, 0, 0.45);
        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;
        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;
    }

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

    .save-to-wishlist-multiple-lists-container.stw-multiple-lists-open .save-to-wishlist-multiple-lists-button {
        font-size: 15px;
        font-weight: 600;
    }

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