/* ═══════════════════════════════════════════════════════════════════
   Wishlist page — [inspira_wishlist_page] shortcode
   ───────────────────────────────────────────────────────────────────
   Responsive card grid. The --iwa-wlp-cols var (set inline by the
   shortcode, default 4) drives the desired column count; the grid
   uses auto-fit + minmax with a clamp() so cards keep a usable
   minimum width and naturally drop to fewer columns on narrow
   viewports without needing media queries.

   Card structure:
     .iwa-wishlist-page-card
       .iwa-wishlist-page-card__media     (image + QV trigger + wishlist toggle overlay)
       .iwa-wishlist-page-card__body      (title + price + actions)
   ═══════════════════════════════════════════════════════════════════ */

.iwa-wishlist-page {
    --iwa-wlp-cols: 4;
    --iwa-wlp-gap: 20px;
    --iwa-wlp-card-pad: 14px;
    width: 100%;
    margin: 0 auto;
}

/* State toggle — both populated branch (summary + grid) AND empty
   state branch are always rendered into the DOM. CSS picks which is
   visible based on the data-iwa-wlp-has-items attribute on the
   wrapper. JS updates the attribute as cards come and go, so empty
   ↔ populated transitions happen without a page reload. Initial
   server render sets the attribute correctly so there's no flash. */
.iwa-wishlist-page[data-iwa-wlp-has-items="0"] .iwa-wishlist-page-summary,
.iwa-wishlist-page[data-iwa-wlp-has-items="0"] .iwa-wishlist-page-grid {
    display: none;
}
.iwa-wishlist-page[data-iwa-wlp-has-items="1"] .iwa-wishlist-page-empty {
    display: none;
}

/* Section heading — optional, renders only when caller passes
   heading_text. Browser default margins (esp. on h1-h6) vary
   widely between themes — pin to a clean small bottom margin so
   the heading visually anchors above the grid without over-spacing.
   Elementor widgets override these via per-widget selectors. */
.iwa-wishlist-page-heading {
    margin: 0 0 16px 0;
}

.iwa-wishlist-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(180px, calc(100% / var(--iwa-wlp-cols) - 16px), 280px), 1fr));
    gap: var(--iwa-wlp-gap);
}

/* ─── Card ──────────────────────────────────────────────────────── */

.iwa-wishlist-page-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #ECE8DC;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.iwa-wishlist-page-card:hover {
    box-shadow: 0 4px 16px rgba(20, 19, 15, 0.08);
}
.iwa-wishlist-page-card.is-removing {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 240ms ease, transform 240ms ease;
}

/* Recently Viewed absolute-mode row-gap awareness.
   When the badge hangs above the card via bottom:100%, it occupies
   physical space ABOVE the card border-box. Without extra grid
   spacing:
     - row 1 badges extend above the grid's top edge — get clipped
       by Elementor sections / theme wrappers that use overflow:hidden
     - row N+1 badges visually overlap row N cards because the
       default row-gap is the badge height or less
   The fix below applies ONLY when an absolute-mode position class is
   active (iwa-rv-card-pos-top-left | top-right | top-center). Inline
   mode renders the badge inside the card flow between media and
   body so no grid adjustment is needed. 28px is a conservative
   single-line badge height + breathing room for default font sizes.
   If the user runs much larger RV typography, the value can be
   bumped via a CSS var override. */
body.iwa-recently-viewed-active[class*="iwa-rv-card-pos-"] .iwa-wishlist-page-grid {
    padding-top: 28px;
    row-gap: calc(var(--iwa-wlp-gap, 20px) + 28px);
}

/* Recently Viewed absolute mode — the badge hangs above the card via
   bottom:100% on a position:absolute child of the card root. The
   card's overflow:hidden (above, needed for image rounded-corner
   clipping at the media area's border-radius inheritance) would clip
   it. Mirrors the recently-viewed.css trick at lines 34-37 which
   sets overflow:visible on li.product / .product when the body has
   the iwa-recently-viewed-active class. */
body.iwa-recently-viewed-active .iwa-wishlist-page-card {
    overflow: visible !important;
}

/* View cart full-width override. The canonical mini-cart.css rule at
   line 1039 uses display:inline-flex without width:100% — fine for
   shop loop cards where the button sits at natural size. Our card
   layout has the Add to Cart button at width:100% and View cart
   needs to match for visual parity. Higher specificity (.card-class
   + .button-class) beats the canonical body.iwa-minicart-active
   selector cleanly. */
.iwa-wishlist-page-card .iwa-loop-in-cart {
    width: 100% !important;
}

/* ─── Media ─────────────────────────────────────────────────────── */

.iwa-wishlist-page-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #FAF8F2;
    overflow: hidden;
    border-bottom: 2px solid #ededed;
}
/* Wrap that holds the image + Brand Badge overlay. Position:relative
   so .iwa-brand-badges-overlay (absolute) anchors here, not to the
   card root. Fills the media area so brand badge corners align with
   the image bounds. */
.iwa-wishlist-page-card__image-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}
.iwa-wishlist-page-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}
.iwa-wishlist-page-card__image-link img,
.iwa-wishlist-page-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}
.iwa-wishlist-page-card:hover .iwa-wishlist-page-card__image-link img,
.iwa-wishlist-page-card:hover .iwa-wishlist-page-card__image-wrap img {
    transform: scale(1.04);
}

/* Recently Viewed corner positioning — mirror the absolute-mode
   selectors from recently-viewed.css (lines 67-82) so the badge
   anchors to the correct corner of our card class too. The base
   .iwa-recently-viewed-card-tag has position:absolute + bottom:100%
   already, so it sits ABOVE the card; these rules pin its left/right
   offset per the chosen corner. Inline mode needs no override —
   the badge renders between media and body and its base CSS (relative,
   width:100%, display:flex) makes it a horizontal banner that just
   works. */
body.iwa-rv-card-pos-top-left   .iwa-wishlist-page-card .iwa-recently-viewed-card-tag {
    left: 10px;
    right: auto;
}
body.iwa-rv-card-pos-top-right  .iwa-wishlist-page-card .iwa-recently-viewed-card-tag {
    right: 10px;
    left: auto;
}
body.iwa-rv-card-pos-top-center .iwa-wishlist-page-card .iwa-recently-viewed-card-tag {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* The wishlist trigger inherits its positioning from the global
   Wishlist settings (wishlist_position_vertical / _horizontal). We
   used to force top-right here; that fought the admin's chosen
   placement. Now respects the configured corner. QV trigger (added
   by the woocommerce_product_get_image filter) keeps its own
   positioning — separate concern from the wishlist heart. */

/* ─── Body ──────────────────────────────────────────────────────── */

.iwa-wishlist-page-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--iwa-wlp-card-pad) var(--iwa-wlp-card-pad) calc(var(--iwa-wlp-card-pad) + 4px);
    flex: 1 1 auto;
}
.iwa-wishlist-page-card__title {
    color: #14130F;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    /* Clamp to two lines so the cards align even with long titles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}
.iwa-wishlist-page-card__title:hover {
    color: #C8472B;
}
.iwa-wishlist-page-card__price {
    color: #14130F;
    font-size: 14px;
    font-weight: 700;
}
.iwa-wishlist-page-card__price del {
    color: #888;
    font-weight: 400;
    margin-right: 4px;
}
.iwa-wishlist-page-card__price ins {
    text-decoration: none;
}

/* ─── Actions ───────────────────────────────────────────────────── */

.iwa-wishlist-page-card__actions {
    margin-top: auto;
    padding-top: 10px;
}
.iwa-wishlist-page-card__add,
.iwa-wishlist-page-card__select-options {
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    width: 100% !important;
    padding: 9px 14px !important;
    background: #14130F;
    color: #FFFFFF !important;  /* override theme link color */
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.iwa-wishlist-page-card__add:hover,
.iwa-wishlist-page-card__select-options:hover {
    background: #C8472B;
}
/* WC's "added" state — when the mini-cart's loop_in_cart_marker
   filter is active, the Add to Cart link is wrapped in a dual-state
   span and the post-add UI swap is handled server-side (no .added
   class involved). This rule is the legacy fallback: when mini-cart
   isn't active, WC's add-to-cart.js still adds the .added class to
   the button and inserts a sibling .added_to_cart link — hiding the
   .added button keeps the visual clean even without the dual-state
   wrap. !important because theme button rules tie on specificity. */
.iwa-wishlist-page-card__add.added {
    display: none !important;
}
.iwa-wishlist-page-card__unavailable {
    display: inline-block;
    width: 100%;
    padding: 9px 14px;
    background: #F5F2EB;
    color: #888;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* ─── Empty state ───────────────────────────────────────────────── */

.iwa-wishlist-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    background: #FAF8F2;
    border: 1px dashed #ECE8DC;
    border-radius: 12px;
}
.iwa-wishlist-page-empty__icon {
    width: 56px;
    height: 56px;
    color: #C8472B;
    margin-bottom: 16px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The wishlist module's CSS sets `.iwa-wl-svg { width: 18px; height:
   18px; }` with body-class scope (0,0,2,0 specificity), which clamped
   our empty-state SVG to 18px regardless of the wrapper's size — so
   the Elementor "Icon size" control appeared to only add padding.
   Beat that rule with body + 2 classes (0,0,3,0) so the SVG fills
   the sized wrapper. Matches both wishlist preset SVGs (.iwa-wl-svg)
   and any future plain <svg> placement. */
body.iwa-wishlist-active .iwa-wishlist-page-empty__icon .iwa-wl-svg,
.iwa-wishlist-page-empty__icon svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.iwa-wishlist-page-empty__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #14130F;
}
.iwa-wishlist-page-empty__sub {
    margin: 0 0 20px;
    font-size: 14px;
    color: #6a6a6a;
}
.iwa-wishlist-page-empty__cta {
    display: inline-flex;
    padding: 11px 24px;
    background: #14130F;
    color: #FFFFFF !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease;
}
.iwa-wishlist-page-empty__cta:hover {
    background: #C8472B;
}

/* ─── SKU row ───────────────────────────────────────────────────── */

.iwa-wishlist-page-card__sku {
    font-size: 11px;
    color: #6a6a6a;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: -2px;
    display: flex;
    align-items: center;
}
.iwa-wishlist-page-card__sku-icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    opacity: 0.7;
    flex-shrink: 0;
}
.iwa-wishlist-page-card__sku-label {
    font-weight: 600;
    margin-right: 4px;
    opacity: 0.7;
}
.iwa-wishlist-page-card__sku-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #14130F;
}

/* ─── Per-card category tag ─────────────────────────────────────── */
/* Small clickable pill above the title — primary or first product
   category for the item. Uses Brand Badge's shared primary-term
   resolver so the chosen category matches what other surfaces use. */

.iwa-wishlist-page-card__cat {
    margin-bottom: 2px;
}
.iwa-wishlist-page-card__cat a,
.iwa-wishlist-page-card__cat > span {
    display: inline-block;
    padding: 2px 8px;
    background: #ECE8DC;
    border-radius: 99px;
    color: #6a6a6a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}
.iwa-wishlist-page-card__cat a:hover {
    background: #14130F;
    color: #FFFFFF;
}

/* ─── Summary header ────────────────────────────────────────────── */
/* Just the total count badge — category breakdown was removed after
   testing showed it read as noise on stores with many categories. */

.iwa-wishlist-page-summary {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: #FAF8F2;
    border: 1px solid #ECE8DC;
    border-radius: 8px;
}
.iwa-wishlist-page-summary__count {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.iwa-wishlist-page-summary__count strong {
    font-size: 22px;
    font-weight: 700;
    color: #14130F;
    line-height: 1;
}
.iwa-wishlist-page-summary__count span {
    font-size: 13px;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}