/**
 * Copyright 2026 Volcano MKT
 *
 * @author    Volcano MKT
 * @copyright volcanomkt.in | Volcano MKT all rights reserved.
 * @license   https://www.apache.org/licenses/LICENSE-2.0
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
    --sue-color-primary: var(--color-primary, #25b9d7);
    --sue-color-tertiary: var(--color-tertiary, #ffffff);
    --sue-color-overlay: var(--color-overlay, rgba(255, 255, 255, 0.95));
    --sue-color-overlay-soft: var(--color-overlay-soft, rgba(255, 255, 255, 0.5));
    --sue-color-error-text: var(--color-gift-ideas, #9b0e1c);
    --sue-color-error-bg: var(--color-error-bg, #fdecea);
    --sue-color-success-text: var(--color-success-text, #005955);
    --sue-color-success-bg: var(--color-success-bg, rgba(0, 213, 209, 0.25));
    --sue-color-readonly-bg: var(--color-readonly-bg, #f5f5f5);
    --sue-z-cta-sheet-backdrop: 1000001;
    --sue-z-cta-sheet: 1000002;
    --sue-z-cta-sheet-close: 1000003;
}

body .sue-anchor-attributes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 5px 0 10px;
}

body .sue-anchor-attribute {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: var(--sue-color-tertiary);
    cursor: pointer;
    transition: transform 0.2s ease;
}

body .sue-anchor-attribute:hover {
    transform: scale(1.4);
}

body .sue-anchor-attribute--active {
    transform: scale(1.55);
    cursor: default;
}

/* Disabled = no combination with the currently-active other-attribute.
 * Visually dimmed so the user knows it's a "different size" jump, but
 * still clickable: clicking it shows the stock-alert for that anchor. */
body .sue-anchor-attribute--disabled {
    opacity: 0.4;
}

body .sue-thumbnail-host {
    position: relative;
}

body .sue-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sue-color-overlay);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}

body .sue-overlay--entering {
    animation: sue-overlay-fade-in 200ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

body .sue-overlay--leaving {
    animation: sue-overlay-fade-out 200ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes sue-overlay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sue-overlay-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

body .sue-overlay-dots {
    width: 32px;
    height: 16px;
    background:
        radial-gradient(circle closest-side, var(--sue-color-primary) 90%, transparent) 0% 50%,
        radial-gradient(circle closest-side, var(--sue-color-primary) 90%, transparent) 50% 50%,
        radial-gradient(circle closest-side, var(--sue-color-primary) 90%, transparent) 100% 50%;
    background-size: calc(100% / 3) 8px;
    background-repeat: no-repeat;
    animation: sue-dots-anim 0.9s infinite linear;
}

@keyframes sue-dots-anim {
    20% { background-position: 0% 0%, 50% 50%, 100% 50%; }
    40% { background-position: 0% 100%, 50% 0%, 100% 50%; }
    60% { background-position: 0% 50%, 50% 100%, 100% 0%; }
    80% { background-position: 0% 50%, 50% 50%, 100% 100%; }
}

body .sue-other-attributes {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    line-height: 1.4;
}

/* Both CTA partials live in the DOM; the inactive one is .sue-cta-hidden.
 * Only collapse spacing when the visible sibling is the OOSN form (shares
 * the translucent background). */
body .sue-other-attributes:has(+ .sue-stock-alert:not(.sue-cta-hidden)) {
    padding-bottom: 0;
}

body .sue-other-attributes + .sue-stock-alert:not(.sue-cta-hidden) {
    margin-top: 0;
}

/* Background gated to :hover to avoid white-flash during the .sue-cta-stack
 * opacity 0→1 transition on browsers with compositing latency. */
body .product-miniature-grid .thumbnail-container:hover .sue-other-attributes,
body .product-miniature-grid .thumbnail-container:hover .sue-stock-alert {
    background-color: var(--sue-color-overlay-soft);
}

body .sue-other-attribute {
    padding: 0 0.35rem;
    display: inline-block;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 0 0 transparent;
    transition: text-shadow 0.2s ease, opacity 0.2s ease;
}

/* text-shadow simulates bold; font-weight is not interpolatable in most
 * browsers unless the font is variable. */
body .sue-other-attribute:hover {
    text-shadow: 0 0 0.4px currentColor;
}

body .sue-other-attribute--active {
    font-weight: 700;
    text-shadow: 0 0 0.4px currentColor;
    cursor: default;
}

body .sue-other-attribute--oos {
    text-decoration: line-through;
    opacity: 0.4;
}

body .sue-other-attribute--active.sue-other-attribute--oos {
    opacity: 0.7;
}

/* Other-attribute that has no combination with the active anchor. JS
 * hides it from the badges row entirely (the size belongs to a sibling
 * anchor's bucket only). */
body .sue-other-attribute.sue-other-hidden {
    display: none;
}

/* SPS state flag transition. Class .sue-flag-leaving fades the badge out
 * with a small upward translate; removing the class fades it back in.
 * Toggled by front.js after the cover image swap settles. */
body ul.product-flags li.product-flag.sps-state {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body ul.product-flags li.product-flag.sps-state.sue-flag-leaving {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Listing price block hidden when the active combination has SPS
 * hide_price=1. Toggled together with the SPS badge after the cover
 * image swap settles. */
body .product-price-and-shipping.sue-price-hidden {
    display: none;
}

/* ── Listing card CTA layout (theme amaloa partials owned by SUE) ─────
 * The cart form, the OOS stock-alert form and the size badges are
 * rendered by SUE hooks. Their layout, styling and smooth-entry
 * transition used to live in themes/amaloa/assets/css/custom.css; they
 * move here so the module owns its own visual contract. */

body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom a.btn-iqitwishlist-add {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    opacity: 0;
    transform: translateY(-15px);
    transition: all 0.3s ease-in-out;
}

/* Cart-form + CTA button styling is keyed on `.sue-cta-stack` so it
 * stays consistent whether the stack lives in its original card slot
 * (desktop / non-mobile listings) or has been hoisted to <body> for
 * the mobile sheet drawer view. Decoupling from the miniature
 * ancestor chain (.product-miniature-default .product-functional-buttons)
 * removes the per-zone styling drift entirely. */
body .sue-cta-stack .product-add-cart {
    position: relative;
    width: 100%;
    margin: 0;
}

body .sue-cta-stack .product-add-cart .input-group-add-cart {
    width: 100%;
}

/* The cart-form ships a qty selector for the desktop in-card flow, but
 * the mobile sheet drawer keeps only the submit button so the touch UX
 * stays compact (one-tap add-to-cart with implicit qty=1). The qty
 * input still posts via the form's hidden default, so server-side
 * behavior is unchanged. */
body.sue-mobile > .sue-cta-stack .product-add-cart .input-group-add-cart > *:not([type="submit"]):not(button) {
    display: none;
}

body .sue-cta-stack .btn.btn-product-list {
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-tertiary);
    border-radius: 0;
    padding: 10px 15px;
    opacity: 1;
}

body .sue-cta-stack .btn.btn-product-list:not(:disabled):not(.disabled):active,
body .sue-cta-stack .btn.btn-product-list:active,
body .sue-cta-stack .btn.btn-product-list:focus,
body .sue-cta-stack .btn.btn-product-list:hover {
    outline: none;
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

body .sue-cta-stack .btn.btn-product-list.disabled,
body .sue-cta-stack .btn.btn-product-list.disabled:hover,
body .sue-cta-stack .btn.btn-product-list.disabled:active,
body .sue-cta-stack .btn.btn-product-list.disabled:focus,
body .sue-cta-stack .btn.btn-product-list[disabled],
body .sue-cta-stack .btn.btn-product-list[disabled]:hover,
body .sue-cta-stack .btn.btn-product-list[disabled]:active,
body .sue-cta-stack .btn.btn-product-list[disabled]:focus,
body .sue-cta-stack .btn.btn-product-list[disabled="disabled"],
body .sue-cta-stack .btn.btn-product-list[disabled="disabled"]:hover,
body .sue-cta-stack .btn.btn-product-list[disabled="disabled"]:active,
body .sue-cta-stack .btn.btn-product-list[disabled="disabled"]:focus {
    background: var(--color-disabled);
    color: var(--color-tertiary);
}

body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom {
    left: 0;
    height: 100%;
    pointer-events: none;
    transform: none;
}

body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom .product-functional-buttons-links {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    background: transparent;
}

body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom .product-functional-buttons-links > * {
    pointer-events: auto;
}

/* The three SUE zones animate as a single block via .sue-cta-stack;
 * animating each child separately makes them depart from their own
 * height and the sizes badges (~30px) end up floating above. */
body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom .sue-stock-alert,
body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom .product-add-cart {
    position: relative;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom .sue-cta-stack {
    position: relative;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease-in-out;
}

/* Trigger on .product-miniature-grid:hover (not .thumbnail-container)
 * to avoid loops once the translated wrapper escapes the
 * thumbnail-container bbox: the cursor over the cta-stack keeps the
 * whole card hovered. */
body .product-miniature-grid:hover .product-functional-buttons.product-functional-buttons-bottom .sue-cta-stack {
    opacity: 1;
    transform: translateY(0);
}

/* Both partials (cart-form + stock-alert) ship at first paint; JS
 * toggles this class based on the active combination's stock state.
 * Inside .sue-cta-stack the toggle targets use a grid-row collapse
 * (1fr ↔ 0fr) so the swap cross-fades instead of popping. The
 * generic display:none stays as fallback for any other consumer of
 * the class outside the listing CTA stack. */
body .sue-cta-hidden {
    display: none;
}

/* Cross-fade pattern: both partials share the same vertical slot in
 * the stack via position layering. The visible one sits in flow and
 * drives the stack height; the hidden one is taken out of flow with
 * `position: absolute; inset: 0` so it neither contributes height nor
 * blocks pointer events, while the opacity transition keeps the swap
 * smooth instead of popping. Parent `.sue-cta-stack` already has
 * `position: relative` from the listing rule above. */
body .sue-cta-stack > .product-add-cart,
body .sue-cta-stack > .sue-stock-alert {
    transition: opacity 0.25s ease;
}

body .sue-cta-stack > .product-add-cart.sue-cta-hidden,
body .sue-cta-stack > .sue-stock-alert.sue-cta-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Stock-alert form internals (hioutofstocknotification rendered via SUE) ── */

body .sue-cta-stack .sue-stock-alert {
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap {
    padding: 15px;
}

/* When OOSN follows the sizes badges its top padding shrinks so the
 * vertical gap between badges content and email content stays at 15px
 * (8px bottom padding from badges + 7px top padding here). */
body .sue-other-attributes + .sue-stock-alert .sue-stock-alert__email-wrap {
    padding-top: 7px;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 3px;
    border: 1px solid var(--color-quinary);
    height: 30px;
    background-color: var(--color-tertiary);
    outline: none;
    color: var(--color-disabled);
    -webkit-text-fill-color: var(--color-disabled);
    font-family: inherit;
    font-weight: 400;
    font-size: 11px;
    opacity: 1;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email[readonly] {
    background-color: var(--sue-color-readonly-bg);
    cursor: default;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email:-webkit-autofill,
body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email:-webkit-autofill:hover,
body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email:-webkit-autofill:focus,
body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-disabled);
    transition: background-color 5000s ease-in-out 0s;
    color: var(--color-disabled);
    font-family: inherit;
    font-weight: 400;
    font-size: 11px;
    opacity: 1;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email::-webkit-input-placeholder,
body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email::-moz-placeholder,
body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email::-ms-input-placeholder,
body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email::placeholder {
    color: var(--color-disabled);
    -webkit-text-fill-color: var(--color-disabled);
    font-family: inherit;
    font-weight: 400;
    font-size: 11px;
    opacity: 1;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email:focus,
body .sue-cta-stack .sue-stock-alert .sue-stock-alert__email-wrap .sue-stock-alert__email:active {
    outline: none;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__gdpr {
    display: flex;
    margin-top: 10px;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__gdpr .sue-stock-alert__gdpr-control {
    display: flex;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__gdpr .sue-stock-alert__gdpr-message {
    display: inline;
    margin-top: 2px;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__gdpr .sue-stock-alert__gdpr-message p {
    margin: 0;
    font-size: 11px;
    color: var(--color-tooltip);
    line-height: normal;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__gdpr .sue-stock-alert__gdpr-message a {
    color: var(--color-primary);
    text-decoration: none;
    padding: 0;
    display: inline;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__gdpr .sue-stock-alert__gdpr-message a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 1;
}

body .sue-cta-stack .sue-stock-alert .sue-stock-alert__gdpr .custom-checkbox input[type=checkbox] + span:not(.color) {
    background: var(--color-tertiary);
    color: var(--color-secondary);
    border-radius: 3px;
    border: solid 1px var(--color-quinary);
    box-shadow: none;
}

body .sue-stock-alert .sue-stock-alert__form {
    display: flex;
    flex-direction: column;
}

body .sue-stock-alert .sue-stock-alert__email-wrap {
    position: relative;
    width: 100%;
}

body .sue-stock-alert .sue-stock-alert__alert {
    overflow: hidden;
    opacity: 0;
    padding: 0 12px;
    margin: 0;
    background-color: var(--sue-color-error-bg);
    color: var(--sue-color-error-text);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    transition: opacity 0.25s ease, padding 0.25s ease;
}

body .sue-stock-alert .sue-stock-alert__alert.sue-stock-alert__alert--visible {
    opacity: 1;
    padding: 12px;
}

body .sue-stock-alert .sue-stock-alert__alert.sue-stock-alert__alert--success {
    background-color: var(--sue-color-success-bg);
    color: var(--sue-color-success-text);
}

body .sue-stock-alert .sue-stock-alert__submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Mobile listing CTA flow ─────────────────────────────────────────
 * The whole flow is gated by body.sue-mobile, toggled by the SUE JS
 * via matchMedia on the theme's mobile breakpoint (max-width: 767px).
 * Sheet controls (opener / close / backdrop) ship to every page so
 * the DOM is stable across viewport changes; CSS decides visibility
 * per resolution. Desktop default: everything hidden via the base
 * rule below. */

.sue-cta-sheet-opener,
.sue-cta-sheet-close,
.sue-cta-sheet-backdrop {
    display: none;
}

body.sue-mobile .product-miniature-grid .product-functional-buttons,
body.sue-mobile .product-miniature-grid .product-functional-buttons-bottom,
body.sue-mobile .product-miniature-grid a.btn-iqitwishlist-add {
    transition: none;
}

/* Touch devices fire sticky :hover after a tap, which on the listing
 * keeps the theme's rollover (.product-thumbnail-second) painted on
 * top of .product-thumbnail-first — exactly where the SUE JS swaps
 * the combination image. The rollover is a desktop-only effect, so
 * we silence it in mobile entirely. */
body.sue-mobile .product-miniature-grid .product-thumbnail-second {
    opacity: 0 !important;
    transform: none !important;
}

body.sue-mobile .product-miniature-grid .product-thumbnail-first {
    opacity: 1 !important;
    transform: none !important;
}

body.sue-mobile .product-miniature-grid .product-functional-buttons-bottom {
    opacity: 1;
    transform: none;
    top: 0;
    bottom: auto;
    left: 0;
    pointer-events: none;
}

body.sue-mobile .product-miniature-grid .product-functional-buttons-bottom a.btn-iqitwishlist-add {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.sue-mobile .product-miniature-grid .product-functional-buttons-bottom .js-quick-view-iqit {
    opacity: 0;
    pointer-events: none;
}

body.sue-mobile .product-miniature-grid .sue-cta-sheet-opener {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.sue-mobile .product-miniature-grid .sue-cta-sheet-opener svg {
    width: 22px;
    height: 22px;
}

/* While the sheet is open the "+" openers across the listing are
 * irrelevant (the user is interacting with the active sheet). Hide
 * them globally so neither the dimmed cards nor the active one show
 * a redundant opener. */
body.sue-mobile.sue-cta-sheet-open .sue-cta-sheet-opener {
    display: none;
}

/* Sheet drawer — in mobile, every card's .sue-cta-stack stays hidden
 * via display:none. The JS hoists the active card's stack out to <body>
 * on `+` click so the rule below (body > .sue-cta-stack) lifts it into
 * the viewport sheet position. Hiding instead of parking offscreen via
 * position:fixed translateY(100%) avoids the transform-ancestor trap:
 * swiper carousels apply translate3d on .swiper-wrapper, which would
 * otherwise contain `position: fixed` descendants and the parked
 * stack would render visible at the swiper's bottom instead of below
 * the viewport. */
body.sue-mobile .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom .sue-cta-stack {
    display: none;
}

/* Hoisted active stack rule — when the JS moves the active card's
 * .sue-cta-stack to <body> to escape any ancestor transform (swiper
 * carousels apply translate3d on .swiper-wrapper, which would
 * otherwise contain the position:fixed sheet inside the carousel
 * bounds), it lands as a direct child of <body>. Match it there with
 * the same drawer styling so the visual is identical to an in-card
 * card in a regular grid. */
body.sue-mobile > .sue-cta-stack {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    margin: 0;
    padding: 16px;
    background: var(--sue-color-tertiary);
    z-index: var(--sue-z-cta-sheet);
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

/* Promote the active card's stacking context above the backdrop so
 * its image paints over the dimmer. The card is intentionally lifted
 * with the sheet — the backdrop dims the rest of the listing, not
 * the card the user is interacting with. */
body.sue-mobile .product-miniature-grid.sue-cta-sheet-active {
    position: relative;
    z-index: var(--sue-z-cta-sheet);
}

/* When the active card lives inside a swiper carousel (related
 * products on a product detail page, etc.), the swiper-wrapper's
 * `transform: translate3d(...)` creates a new stacking context that
 * traps the card's z-index. Lift the closest swiper ancestors above
 * the backdrop too so the card escapes the trap. `:has()` matches
 * only the swiper that currently contains the active card, so other
 * carousels on the same page stay below the dimmer.
 *
 * The promoted swiper has `pointer-events: none` so clicks pass
 * through to the backdrop (closing the sheet on any non-active
 * area). The active card re-enables `pointer-events: auto` for itself
 * and its descendants, mirroring the listing behavior where only the
 * active card receives clicks. This keeps the UX identical between
 * pure listings and any swiper-wrapped listing (related products,
 * accessories) — no per-zone special-casing. */
body.sue-mobile.sue-cta-sheet-open .products.products-grid.swiper-container:has(.sue-cta-sheet-active),
body.sue-mobile.sue-cta-sheet-open .products.products-grid .swiper-wrapper:has(.sue-cta-sheet-active),
body.sue-mobile.sue-cta-sheet-open .products.products-grid .swiper-slide:has(.sue-cta-sheet-active) {
    position: relative;
    z-index: var(--sue-z-cta-sheet) !important;
    pointer-events: none;
}

body.sue-mobile.sue-cta-sheet-open .product-miniature-grid.sue-cta-sheet-active,
body.sue-mobile.sue-cta-sheet-open .product-miniature-grid.sue-cta-sheet-active * {
    pointer-events: auto;
}

/* Dim non-active siblings inside the promoted carousel so the active
 * card stays visually highlighted — the backdrop is below the
 * promoted swiper here and cannot reach them otherwise. */
body.sue-mobile.sue-cta-sheet-open .swiper-slide:not(:has(.sue-cta-sheet-active)) .product-miniature-grid {
    opacity: 0.35;
    transition: opacity 0.3s ease-in-out;
}

/* Bootstrap tooltips (wishlist "En la lista de deseos", etc.) default
 * to z-index 1070 — well below the promoted active card (10001), so
 * they get clipped behind the lifted image. Lift them above every
 * sheet layer while the drawer is open so they remain readable on
 * the promoted card. */
body.sue-cta-sheet-open .tooltip {
    z-index: calc(var(--sue-z-cta-sheet-close) + 1);
}

body.sue-mobile .sue-cta-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--sue-z-cta-sheet-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

body.sue-mobile.sue-cta-sheet-open .sue-cta-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.sue-mobile .sue-cta-sheet-close {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--sue-z-cta-sheet-close);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: var(--sue-color-tertiary);
    color: var(--color-primary);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
}

body.sue-mobile .sue-cta-sheet-close svg {
    width: 20px;
    height: 20px;
}

body.sue-mobile.sue-cta-sheet-open .sue-cta-sheet-close {
    display: flex;
}

/* ── Responsive overrides (Bootstrap breakpoints) ────────────────────
 * Keep every @media at the bottom of the file, ordered from narrowest
 * viewport upwards and finishing with capability queries (hover). */

@media (max-width: 767px) {
    body .product-miniature-grid .product-functional-buttons.product-functional-buttons-bottom a.btn-iqitwishlist-add {
        width: 26px;
        height: 26px;
        top: 6px;
    }

    body .product-miniature-grid .product-functional-buttons i {
        font-size: 1.4rem;
    }

    .products.products-grid.swiper-container,
    .products.products-grid .swiper-wrapper,
    .products.products-grid .swiper-slide {
        z-index: auto !important;
    }

    body.sue-cta-sheet-open #main-product-wrapper .product-add-to-cart {
        display: none;
    }
}

@media (hover: hover) {
    body .product-miniature-grid .thumbnail-container:has(.product-add-cart:hover) .product-thumbnail-second,
    body .product-miniature-grid .thumbnail-container:has(.sue-stock-alert:hover) .product-thumbnail-second,
    body .product-miniature-grid .thumbnail-container:has(.sue-other-attributes:hover) .product-thumbnail-second {
        opacity: 0 !important;
        transform: none !important;
    }

    body .product-miniature-grid .thumbnail-container:has(.product-add-cart:hover) .product-thumbnail-first,
    body .product-miniature-grid .thumbnail-container:has(.sue-stock-alert:hover) .product-thumbnail-first,
    body .product-miniature-grid .thumbnail-container:has(.sue-other-attributes:hover) .product-thumbnail-first {
        transform: none !important;
    }

    body .product-miniature-grid:hover .product-functional-buttons.product-functional-buttons-bottom a.btn-iqitwishlist-add {
        opacity: 1;
        transform: translateY(0);
    }
}