/* ═══════════════════════════════════════════════════════════════════
   Wishlist — E2 styles.

   Three contexts where the trigger renders:
     - .iwa-wishlist-trigger--card    Product card (absolute, corner pos)
     - .iwa-wishlist-trigger--single  Single product page (inline near CTA)
     - .iwa-wishlist-trigger--qv      QV drawer body (absolute, BR corner)

   Three icon presets:
     - .iwa-wl-preset-heart    SVG with bursting-circle animation
     - .iwa-wl-preset-bookmark Outline-to-fill toggle
     - .iwa-wl-preset-clock    Outline-to-fill toggle

   The animation gate: animations only fire when .was-clicked is present
   on the trigger. Server renders the heart in :checked state for
   logged-in users with the product saved — without the gate, the burst
   animation would play on every page load. JS adds .was-clicked on the
   first user interaction.                                              */

/* ─── Base trigger structure ─────────────────────────────────────────
   The checkbox is hidden (visually). The label IS the clickable area
   and visual target. Same pattern V1 / V2 in the spec; works across
   browsers without :has() support.                                     */

.iwa-wishlist-trigger {
    position: relative;
    display: inline-block;
    line-height: 0;
    z-index: 6; /* Above QV trigger (z-index 5) when both stack same corner */
}
.iwa-wishlist-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
}
.iwa-wishlist-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--iwa-wl-bg, #FFFFFF);
    color:      var(--iwa-wl-fg, #E2264D);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.iwa-wishlist-label:hover {
    background: var(--iwa-wl-hover-bg, #E2264D);
    color:      var(--iwa-wl-hover-fg, #FFFFFF);
    box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}

/* ─── Saved state colors ────────────────────────────────────────────
   When the checkbox is :checked (item is in wishlist), bg + color
   shift to the saved-state colors. Distinct from Normal and Hover so
   the customer sees a clear "this is saved" visual indicator.

   The default saved colors (light pink bg + heart-red fg) give a
   permanent "this is favorited" wash that's visually different from
   both the resting state and the active hover state. */
.iwa-wishlist-checkbox:checked + .iwa-wishlist-label {
    background: var(--iwa-wl-saved-bg, #FCE4EC);
    color:      var(--iwa-wl-saved-fg, #E2264D);
}
/* Saved + hover — keep the hover bg darker variant to give feedback
   while preserving the saved-state palette. */
.iwa-wishlist-checkbox:checked + .iwa-wishlist-label:hover {
    background: var(--iwa-wl-saved-bg, #FCE4EC);
    color:      var(--iwa-wl-saved-fg, #E2264D);
    filter: brightness(0.95);
}

.iwa-wishlist-checkbox:focus-visible + .iwa-wishlist-label {
    outline: 2px solid #14130F;
    outline-offset: 2px;
}
.iwa-wishlist-label:active { transform: scale(0.94); }

/* ─── Non-card contexts: no background circle ───────────────────────
   On the single product page, sticky cart bar, and QV drawer image,
   the bg circle (especially the hover bg) covers the burst animation.
   Since the burst is the whole point of the heart V2 animation, the
   non-card contexts render the icon BARE — just the SVG on the page
   background, no circle. Hover changes the icon color only. */
.iwa-wishlist-trigger--single .iwa-wishlist-label,
.iwa-wishlist-trigger--qv     .iwa-wishlist-label,
.iwa-wishlist-trigger--sticky .iwa-wishlist-label {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.iwa-wishlist-trigger--single .iwa-wishlist-label:hover,
.iwa-wishlist-trigger--qv     .iwa-wishlist-label:hover,
.iwa-wishlist-trigger--sticky .iwa-wishlist-label:hover {
    background: transparent;
    box-shadow: none;
    color: var(--iwa-wl-hover-bg, #E2264D); /* swap to the "hover" hue */
}
/* Saved state on non-card contexts — only the icon color shifts (no bg) */
.iwa-wishlist-trigger--single .iwa-wishlist-checkbox:checked + .iwa-wishlist-label,
.iwa-wishlist-trigger--qv     .iwa-wishlist-checkbox:checked + .iwa-wishlist-label,
.iwa-wishlist-trigger--sticky .iwa-wishlist-checkbox:checked + .iwa-wishlist-label {
    background: transparent;
    color: var(--iwa-wl-saved-fg, #E2264D);
}

.iwa-wl-svg {
    width: 18px;
    height: 18px;
    overflow: visible; /* burst groups extend beyond the viewBox */
}

/* ─── Heart SVG vertical centering on card context ──────────────────
   The heart SVG uses viewBox="0 0 32 32" but the heart PATH itself sits
   in roughly y=0 to y=28 — there's ~2px of bottom whitespace built into
   the viewBox. Flex-centering positions the viewBox center at y=16, but
   the heart's visual center is around y=14, so it appears ~2-3px low.

   Margin-top pushes the SVG down… wait no, it pushes the heart further
   down. But the bug is the heart sits too LOW already. Reading what
   Frick called for again: he said the SVG needs `margin-top:3px` to
   center it on the product card button. The icon currently sits too
   HIGH relative to the visual mid-line he expects (the bg circle is
   a perfect circle so its midline IS at the geometric center; the
   heart's empty bottom whitespace makes the visible heart sit above
   center). Adding margin-top pushes the whole SVG down, which moves
   the visible heart down toward the visual center of the bg circle.

   Scope: card context only — non-card contexts have transparent bg
   so there's no visible "frame" to center against. */
.iwa-wishlist-trigger--card .iwa-wl-svg {
    margin-top: 3px;
}

/* ─── B3 (v0.3.71): Hide trigger when product is in cart ────────────
   Gated by the .iwa-wl-mutex-cart body class which PHP adds only when
   wishlist_block_when_in_cart is enabled. The data-iwa-wl-in-cart="1"
   attribute is set:
     - At render time by PHP (build_trigger_html reads WC()->cart)
     - Live in JS by the added_to_cart / removed_from_cart event handlers

   When the setting is OFF, the trigger stays visible and the block is
   enforced via toast-on-click instead. */
body.iwa-wl-mutex-cart .iwa-wishlist-trigger[data-iwa-wl-in-cart="1"] {
    display: none;
}

/* ─── Heart preset: V2 SVG animation with .was-clicked gate ────────
   Direct adaptation of the user-provided pure-CSS heart. All :checked
   selectors are scoped to .was-clicked so initial page render is
   silent — animations only fire after a user interaction. */

.iwa-wishlist-trigger.iwa-wl-preset-heart .iwa-wl-heart {
    transform-origin: center;
    fill: transparent;
}
.iwa-wishlist-trigger.iwa-wl-preset-heart.was-clicked .iwa-wl-heart {
    animation: iwa-wl-heart-out 0.3s linear forwards;
}
.iwa-wishlist-trigger.iwa-wl-preset-heart .iwa-wl-main-circ {
    transform-origin: 50% 50%;
}

/* Checked state — heart fills + scales pulse; main circle expands;
   ovals fly outward in 7 directions. All gated by .was-clicked. */
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-heart {
    transform: scale(0.2);
    fill: currentColor;
    animation: iwa-wl-heart-fill 0.3s linear forwards 0.25s;
}
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-main-circ {
    transition: all 2s;
    animation: iwa-wl-burst 0.3s linear forwards;
    opacity: 1;
}
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp {
    opacity: 1;
    transition: 0.1s all 0.3s;
}
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp1 circle:nth-child(1) { transform: scale(0) translate(-30px, -15px); transform-origin: 0 0; transition: 0.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp1 circle:nth-child(2) { transform: scale(0) translate(-55px, -30px); transform-origin: 0 0; transition: 1.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp2 circle:nth-child(1) { transform: scale(0) translate(-30px, 0px);   transform-origin: 0 0; transition: 0.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp2 circle:nth-child(2) { transform: scale(0) translate(-60px, -5px);  transform-origin: 0 0; transition: 1.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp3 circle:nth-child(1) { transform: scale(0) translate(-10px, 20px);  transform-origin: 0 0; transition: 0.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp3 circle:nth-child(2) { transform: scale(0) translate(-60px, 30px);  transform-origin: 0 0; transition: 1.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp4 circle:nth-child(1) { transform: scale(0) translate(30px, 15px);   transform-origin: 0 0; transition: 0.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp4 circle:nth-child(2) { transform: scale(0) translate(40px, 50px);   transform-origin: 0 0; transition: 1.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp5 circle:nth-child(1) { transform: scale(0) translate(30px, 0px);    transform-origin: 0 0; transition: 0.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp5 circle:nth-child(2) { transform: scale(0) translate(60px, 10px);   transform-origin: 0 0; transition: 1.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp6 circle:nth-child(1) { transform: scale(0) translate(30px, -15px);  transform-origin: 0 0; transition: 0.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp6 circle:nth-child(2) { transform: scale(0) translate(60px, -15px);  transform-origin: 0 0; transition: 1.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp7 circle:nth-child(1) { transform: scale(0) translate(0, -30px);     transform-origin: 0 0; transition: 0.5s transform 0.3s; }
.iwa-wl-preset-heart.was-clicked .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-grp7 circle:nth-child(2) { transform: scale(0) translate(10px, -50px);  transform-origin: 0 0; transition: 1.5s transform 0.3s; }

/* Initial checked state (server-rendered) — heart filled, no animation.
   This rule takes priority over the :checked + label transitions
   ONLY when .was-clicked is NOT present. */
.iwa-wl-preset-heart:not(.was-clicked) .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-heart {
    fill: currentColor;
}

@keyframes iwa-wl-burst {
    40%  { transform: scale(10); opacity: 1; fill: #DD4688; }
    55%  { transform: scale(11); opacity: 1; fill: #D46ABF; }
    65%  { transform: scale(12); opacity: 1; fill: #CC8EF5; }
    75%  { transform: scale(13); opacity: 1; fill: transparent; stroke: #CC8EF5; stroke-width: 0.5; }
    85%  { transform: scale(17); opacity: 1; fill: transparent; stroke: #CC8EF5; stroke-width: 0.2; }
    95%  { transform: scale(18); opacity: 1; fill: transparent; stroke: #CC8EF5; stroke-width: 0.1; }
    100% { transform: scale(19); opacity: 1; fill: transparent; stroke: #CC8EF5; stroke-width: 0;   }
}
@keyframes iwa-wl-heart-fill {
    0%   { transform: scale(0.2); }
    40%  { transform: scale(1.2); }
    100% { transform: scale(1);   }
}
@keyframes iwa-wl-heart-out {
    0%   { transform: scale(1.4); }
    100% { transform: scale(1);   }
}

/* ─── Bookmark + Clock presets: simple toggle (no burst) ─────────── */

.iwa-wishlist-trigger.iwa-wl-preset-bookmark .iwa-wl-bookmark,
.iwa-wishlist-trigger.iwa-wl-preset-clock .iwa-wl-clock-face {
    transition: fill 220ms ease;
    fill: transparent;
}
.iwa-wl-preset-bookmark .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-bookmark,
.iwa-wl-preset-clock .iwa-wishlist-checkbox:checked + .iwa-wishlist-label .iwa-wl-clock-face {
    fill: currentColor;
}

/* ─── Card surface: absolute position at chosen corner ──────────────
   Visibility model mirrors the QV trigger pattern (proven solid):

     - `.iwa-wishlist-trigger--vis-always` → opacity:1 always
     - `.iwa-wishlist-trigger--vis-hover`  → only the hidden default
       AND the hover-reveal rules are WRAPPED in
       `@media (hover: hover) and (pointer: fine)`. Touch devices
       skip the whole block, so on touch the hover-mode trigger
       stays visible (no opacity rule applies = default visible).

   Previously this used `@media (hover: none), (pointer: coarse)` to
   force always-visible on touch, but hybrid laptops report `hover:
   none` and so the trigger went always-visible on desktop too. The
   QV-pattern approach is the correct fix. */

.iwa-wishlist-image-wrap,
.iwa-qv-image-wrap {
    position: relative; /* anchors absolute children */
}

/* Base card positioning — corner anchored by body class. */
.iwa-wishlist-trigger--card {
    position: absolute;
    /* Default corner — overridden by per-corner rules below */
    top:    var(--iwa-wl-offset, 10px);
    right:  var(--iwa-wl-offset, 10px);
    transition: opacity 150ms ease;
}

/* Always-visible mode: outside any media query, opacity:1. */
.iwa-wishlist-trigger--card.iwa-wishlist-trigger--vis-always {
    opacity: 1;
    pointer-events: auto;
}

/* Hover mode: hover behavior ONLY on desktop pointer devices. On
   touch or hybrid devices the trigger stays visible (no rule applies
   outside this media query). */
@media (hover: hover) and (pointer: fine) {
    .iwa-wishlist-trigger--card.iwa-wishlist-trigger--vis-hover {
        opacity: 0;
        pointer-events: none;
    }
    li.product:hover           .iwa-wishlist-trigger--card.iwa-wishlist-trigger--vis-hover,
    li.product:focus-within    .iwa-wishlist-trigger--card.iwa-wishlist-trigger--vis-hover,
    .iwa-qv-image-wrap:hover   .iwa-wishlist-trigger--card.iwa-wishlist-trigger--vis-hover,
    .iwa-wishlist-image-wrap:hover .iwa-wishlist-trigger--card.iwa-wishlist-trigger--vis-hover {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Per-corner positioning (driven by body class). */
body.iwa-wl-pos-top.iwa-wl-pos-right    .iwa-wishlist-trigger--card { top:    var(--iwa-wl-offset, 10px); right:  var(--iwa-wl-offset, 10px); left: auto; bottom: auto; }
body.iwa-wl-pos-top.iwa-wl-pos-left     .iwa-wishlist-trigger--card { top:    var(--iwa-wl-offset, 10px); left:   var(--iwa-wl-offset, 10px); right: auto; bottom: auto; }
body.iwa-wl-pos-bottom.iwa-wl-pos-right .iwa-wishlist-trigger--card { bottom: var(--iwa-wl-offset, 10px); right:  var(--iwa-wl-offset, 10px); top: auto; left: auto; }
body.iwa-wl-pos-bottom.iwa-wl-pos-left  .iwa-wishlist-trigger--card { bottom: var(--iwa-wl-offset, 10px); left:   var(--iwa-wl-offset, 10px); top: auto; right: auto; }

/* Stack with QV — when both features share the corner, wishlist sits
   farther from the corner than QV (QV is primary CTA). 40px ≈ QV
   button height + small gap. */
body.iwa-wl-stack-with-qv.iwa-wl-pos-top    .iwa-wishlist-trigger--card { top:    calc(var(--iwa-wl-offset, 10px) + 40px); }
body.iwa-wl-stack-with-qv.iwa-wl-pos-bottom .iwa-wishlist-trigger--card { bottom: calc(var(--iwa-wl-offset, 10px) + 40px); }

/* ─── Single product surface ─────────────────────────────────────────
   Renders inside .woocommerce-product-gallery via the
   woocommerce_product_thumbnails action hook. CSS positions the
   trigger absolute at BR of the gallery. No text label — just the icon. */

.woocommerce-product-gallery { position: relative; } /* anchors the trigger */

.iwa-wishlist-trigger--single {
    position: absolute;
    bottom: var(--iwa-wl-single-offset-v, 16px);
    right:  var(--iwa-wl-single-offset-h, 16px);
    z-index: 10;
}
.iwa-wishlist-trigger--single .iwa-wishlist-label {
    width:  var(--iwa-wl-single-icon-size, 22px);
    height: var(--iwa-wl-single-icon-size, 22px);
}
.iwa-wishlist-trigger--single .iwa-wl-svg {
    width:  var(--iwa-wl-single-icon-size, 22px);
    height: var(--iwa-wl-single-icon-size, 22px);
}

/* ─── QV drawer surface: BR of GALLERY (not drawer body) ─────────────
   Renders inside .iwa-qv-gallery via class-quick-view.php injection.
   .iwa-qv-gallery already has position: relative (from quick-view.css)
   so absolute positioning is anchored to the gallery image area. */

.iwa-qv-gallery { position: relative; } /* belt-and-suspenders */

.iwa-wishlist-trigger--qv {
    position: absolute;
    bottom: var(--iwa-wl-qv-offset-v, 16px);
    right:  var(--iwa-wl-qv-offset-h, 16px);
    z-index: 7;
}
.iwa-wishlist-trigger--qv .iwa-wishlist-label {
    width:  var(--iwa-wl-qv-icon-size, 22px);
    height: var(--iwa-wl-qv-icon-size, 22px);
}
.iwa-wishlist-trigger--qv .iwa-wl-svg {
    width:  var(--iwa-wl-qv-icon-size, 22px);
    height: var(--iwa-wl-qv-icon-size, 22px);
}

/* ─── Sticky cart surface ────────────────────────────────────────────
   Renders as a sibling of .iwa-sticky-atc-button-container inside
   .iwa-sticky-atc-actions. Inline-flex so it sits naturally beside
   the add-to-cart button. */

.iwa-wishlist-trigger--sticky {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}
.iwa-wishlist-trigger--sticky .iwa-wishlist-label {
    width:  var(--iwa-wl-sticky-icon-size, 22px);
    height: var(--iwa-wl-sticky-icon-size, 22px);
}
.iwa-wishlist-trigger--sticky .iwa-wl-svg {
    width:  var(--iwa-wl-sticky-icon-size, 22px);
    height: var(--iwa-wl-sticky-icon-size, 22px);
}

/* Sticky cart actions container: ensure flex layout so the trigger
   sits inline next to the button container. Defensive — the existing
   .iwa-sticky-atc-actions may already be flex, but specifying here
   makes the layout intent explicit and survives theme overrides. */
.iwa-sticky-atc-actions {
    display: flex;
    align-items: center;
}

/* ─── E3: Mini-cart drawer tab nav ───────────────────────────────────
   Tab bar sits between the header and the panels. Two tabs (Cart /
   Wishlist) with count badges. Active tab is underlined; inactive is
   muted. */

.iwa-minicart-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #E8E4D8;
    padding: 0 16px;
    flex: 0 0 auto;
}
.iwa-minicart-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6B6760;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
    margin-bottom: -1px; /* overlap the parent border */
}
.iwa-minicart-tab:hover {
    color: #14130F;
}
.iwa-minicart-tab.is-active {
    color: #14130F;
    border-bottom-color: #14130F;
}
.iwa-minicart-tab:focus-visible {
    outline: 2px solid #14130F;
    outline-offset: -2px;
}
.iwa-minicart-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: #F0EDE5;
    color: #14130F;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}
.iwa-minicart-tab.is-active .iwa-minicart-tab-count {
    background: #14130F;
    color: #FFFFFF;
}

/* ─── E3: Panels (Cart / Wishlist) ──────────────────────────────────
   The panels container takes the remaining vertical space. Each panel
   sits stacked; JS toggles `hidden` to switch. Cart panel preserves its
   existing internal structure (footer etc) — we only WRAPPED it. */

.iwa-minicart-panels {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.iwa-minicart-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.iwa-minicart-panel[hidden] {
    display: none;
}

/* ─── E3: Wishlist panel — items list + empty state + clear button ── */

.iwa-minicart-panel--wishlist {
    overflow: hidden;
    background: #FFFFFF;
}
.iwa-wl-drawer-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
}
.iwa-wl-drawer-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    color: #6B6760;
}
.iwa-wl-drawer-empty[hidden] { display: none; }
.iwa-wl-drawer-empty svg { color: #C8C2B5; margin-bottom: 14px; }
.iwa-wl-drawer-empty p { margin: 0; font-size: 14px; }

.iwa-wl-drawer-item {
    /* ─── 3-col grid mirroring .iwa-minicart-item ─────────────────────
       64px thumb | 1fr info | auto remove-X. Identical to the cart line
       item layout so the two drawer panels are visually consistent. */
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 16px 20px;
    border-bottom: 1px solid #F4F1E8;
    transition: opacity 200ms ease, transform 200ms ease, max-height 200ms ease;
}
.iwa-wl-drawer-item:last-child {
    border-bottom: none;
}
.iwa-wl-drawer-item.is-removing {
    opacity: 0;
    transform: translateX(40px);
}

/* ─── Col 1: thumb ──────────────────────────────────────────────── */
.iwa-wl-drawer-item-thumb {
    display: block;
    text-decoration: none;
}
.iwa-wl-drawer-item-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.iwa-wl-drawer-item-img-placeholder {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    background: linear-gradient(135deg, #F4F1E9 25%, #E8E4D8 50%, #F4F1E9 75%);
}

/* ─── Col 2: info column (name + SKU + price + move-to-cart) ─────── */
.iwa-wl-drawer-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.iwa-wl-drawer-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #14130F;
    text-decoration: none;
    line-height: 1.3;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
a.iwa-wl-drawer-item-name:hover { text-decoration: underline; }

/* SKU line — matches .iwa-minicart-item-sku exactly so cart + wishlist
   panels render the SKU identically. Honors the merchant's Storefront
   Labels rename (e.g. "Style code:") via Inspira_Woo_Addons_Storefront_Labels::get_sku_label(). */
.iwa-wl-drawer-item-sku {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6B665B;
    letter-spacing: .02em;
    line-height: 1.3;
}
.iwa-wl-drawer-item-sku-label { font-weight: 600; }
.iwa-wl-drawer-item-sku-value { color: #14130F; font-weight: 700; }

.iwa-wl-drawer-item-price {
    font-size: 14px;
    font-weight: 700;
    color: #14130F;
    white-space: nowrap;
}
.iwa-wl-drawer-item-price del { color: #6B6760; font-weight: 500; margin-right: 6px; }
.iwa-wl-drawer-item-price ins { text-decoration: none; }

.iwa-wl-drawer-item-actions {
    /* DEPRECATED in v0.3.72 — kept as no-op for any custom CSS that
       might reference the old selector. Use .iwa-wl-drawer-item-meta. */
}

/* ─── Meta row — mirrors .iwa-minicart-item-meta exactly ────────────
   Flex row with [move-to-cart button] on the left + [price] right-aligned.
   The move-to-cart button replaces where the cart line's qty widget is. */
.iwa-wl-drawer-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.iwa-wl-drawer-item-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    background: #14130F;
    color: #FFFFFF;
    border: 1px solid #14130F;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    white-space: nowrap;
}
.iwa-wl-drawer-item-move:hover {
    background: transparent;
    color: #14130F;
}
.iwa-wl-drawer-item-move--variable { /* same look as the button */ }

/* ─── Col 3: X remove button — matches .iwa-minicart-item-remove ─── */
.iwa-wl-drawer-item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #B8B2A4;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.iwa-wl-drawer-item-remove:hover,
.iwa-wl-drawer-item-remove:focus {
    background: #FCEEEA;
    color: #C8472B;
    border-color: #F3D1C8;
    outline: none;
}

.iwa-wl-drawer-footer {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid #F0EDE5;
}

/* ─── Clear wishlist button (C3) ───────────────────────────────────
   Filled bg by default (was: transparent), darker on hover. Mirrors
   the visual weight of the cart's clear button. */
.iwa-wl-drawer-clear {
    display: block;
    width: 100%;
    padding: 9px 16px;
    background: #FAE8E2;
    color: #C8472B;
    border: 1px solid #F2C9BF;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.iwa-wl-drawer-clear:hover {
    background: #F2C9BF;
    color: #A8341F;
    border-color: #E5B5A8;
}
.iwa-wl-drawer-clear[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   D (v0.3.71): Count badge — small chip on the trigger.

   Renders inside .iwa-wishlist-trigger absolute-positioned at the
   corner of the .iwa-wishlist-label. Shows total wishlist count.
   Updated live by JS on iwa_wishlist_changed.

   Per-context visibility is enforced PHP-side (badge is omitted from
   the trigger HTML entirely when the context's toggle is off). No CSS
   gating needed. .iwa-wishlist-trigger already has position: relative
   from the base rule above — badge anchors to it directly.            */

.iwa-wl-count-badge {
    position: absolute;
    top: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #E2264D;        /* heart-red — matches saved-state fg default */
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
    pointer-events: none;       /* never blocks clicks on the label */
    box-sizing: border-box;
    letter-spacing: 0;
}
.iwa-wl-count-badge--pos-right { right: -4px; }
.iwa-wl-count-badge--pos-left  { left:  -4px; }
.iwa-wl-count-badge[hidden]    { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   E (v0.3.71): Trigger style — icon | icon_label.

   When icon_label, the label text appears next to the heart icon.
   We widen the label container and switch its layout to a flex row
   with gap. Applies to all contexts uniformly (global setting,
   mirrors quick_view_style pattern).                                  */

.iwa-wishlist-trigger--style-icon-label .iwa-wishlist-label {
    width: auto;
    padding: 0 12px;
    border-radius: 6px;
    gap: 8px;
}
.iwa-wl-trigger-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Non-card icon_label still has no bg circle (already handled by the
   transparent-bg rules), but we restore some padding so the label
   text has breathing room from the icon edge. */
.iwa-wishlist-trigger--single.iwa-wishlist-trigger--style-icon-label .iwa-wishlist-label,
.iwa-wishlist-trigger--qv.iwa-wishlist-trigger--style-icon-label .iwa-wishlist-label,
.iwa-wishlist-trigger--sticky.iwa-wishlist-trigger--style-icon-label .iwa-wishlist-label {
    padding: 0 4px;
    gap: 6px;
}