/* ==========================================================================
   Identities Gallery — loop card (design: "Galerija - Popis Proizvoda")
   Styles for cws-suite/loop-card.php wherever WooCommerce prints a product
   loop: the Filters Pro grid on the new shop, Sober's product grids / tabs /
   carousels, Elementor's Products and Related widgets, the archives.

   CWS Suite enqueues this file site-wide when "Shop loop cards" is "Custom"
   (cws_suite_loop_card_theme_asset()), in place of its Soft Card sheet.

   The card never sets its own width, float, padding or margin: the grid it
   sits in owns the layout (Sober's col-* gutters, Elementor's grid gap, the
   Filters Pro grid in cws-suite/filters-panel.css). Everything here is the
   card's inside.

   Specificity: the root is `ul.products li.product.iga-card` (0,3,2), so a
   child rule is (0,4,2)+ — at or above WooCommerce's
   `.woocommerce ul.products li.product .price` and Sober's loop rules, and
   far above the Elementor kit's (0,1,1) button/link/heading rules. The price
   is written as `.iga-card__pr.price` to clear WooCommerce's tie.

   Icons: their paint sits on the shapes (card.php), because Sober's style.css
   has a global `svg { fill; stroke; stroke-width: 0 }`.
   ========================================================================== */

ul.products li.product.iga-card {
    --iga-ink: #1f1f1f;
    --iga-muted: #8e8e8c;
    --iga-olive: #8fa83a;
    --iga-olive: oklch(0.7 0.14 115);
    --iga-red: #7d2a24;
    --iga-red: oklch(0.4 0.13 25);
    --iga-cut: #b8452f;
    --iga-cut: oklch(0.55 0.16 30);
    --iga-spring: cubic-bezier(.34, 1.56, .64, 1);

    position: relative;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    color: var(--iga-ink);
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    transform: none;
    list-style: none;
    -webkit-font-smoothing: antialiased;
}

ul.products li.product.iga-card:hover { box-shadow: none; transform: none; }
ul.products li.product.iga-card::before,
ul.products li.product.iga-card::after { content: none; }

/* ---------- Badges (also used by the quick view) ---------- */

.iga-badges {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    pointer-events: none;
}

.iga-badge {
    display: grid;
    place-items: center;
    height: 30px;
    min-width: 110px;
    padding: 0 16px;
    background: var(--iga-olive, #8fa83a);
    color: #fff;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
}

.iga-badge--new { background: var(--iga-olive, #8fa83a); }
.iga-badge--selection { background: var(--iga-ink, #1f1f1f); }
.iga-badge--promo { background: var(--iga-red, #7d2a24); }
.iga-badge--sold { background: var(--iga-muted, #8e8e8c); }

ul.products li.product.iga-card .iga-badge { position: relative; }

/* ---------- Image: square, cover, second image on hover ---------- */

ul.products li.product.iga-card div.iga-card__img {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    background: #f4f4f2;
}

ul.products li.product.iga-card div.iga-card__img img.iga-card__ph,
ul.products li.product.iga-card div.iga-card__img img.iga-card__img--hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
}

ul.products li.product.iga-card div.iga-card__img img.iga-card__img--hover {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

ul.products li.product.iga-card:hover div.iga-card__img img.iga-card__img--hover { opacity: 1; }

ul.products li.product.iga-card .iga-card__hit { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
ul.products li.product.iga-card .iga-card__hit:hover { text-decoration: none; }

/* ---------- Round actions over the image: rise in one after the other ---------- */

ul.products li.product.iga-card .iga-card__acts {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0;
    pointer-events: none;
}

ul.products li.product.iga-card:hover .iga-card__acts,
ul.products li.product.iga-card:focus-within .iga-card__acts { pointer-events: auto; }

ul.products li.product.iga-card .iga-card__act {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    min-width: 0;
    height: 50px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 28, 28, .92);
    background-color: rgba(28, 28, 28, .92);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    font-family: inherit;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .45s var(--iga-spring), background-color .2s, color .2s, box-shadow .2s;
}

ul.products li.product.iga-card .iga-card__act:nth-child(2) { transition-delay: .05s, .05s, 0s, 0s, 0s; }
ul.products li.product.iga-card .iga-card__act:nth-child(3) { transition-delay: .1s, .1s, 0s, 0s, 0s; }

ul.products li.product.iga-card:hover .iga-card__act,
ul.products li.product.iga-card:focus-within .iga-card__act {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    ul.products li.product.iga-card .iga-card__acts { pointer-events: auto; }
    ul.products li.product.iga-card .iga-card__act { opacity: 1; transform: none; }
}

ul.products li.product.iga-card .iga-card__act:hover {
    background: #000;
    background-color: #000;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    transform: translateY(-3px) scale(1.06);
    transition-delay: 0s;
}

ul.products li.product.iga-card .iga-card__act svg {
    width: 20px;
    height: 20px;
    margin: 0;
    transition: transform .3s var(--iga-spring);
}

ul.products li.product.iga-card .iga-card__act.cws-add-to-cart:hover > svg { transform: translateX(2px) rotate(-6deg); }
ul.products li.product.iga-card .iga-card__act.iga-fav:hover > svg { transform: scale(1.12); }

/* In the cart / saved: white disc, dark icon */
ul.products li.product.iga-card .iga-card__act.is-on,
ul.products li.product.iga-card .iga-card__act.is-active {
    background: #fff;
    background-color: #fff;
    color: var(--iga-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

ul.products li.product.iga-card .iga-card__act.is-on:hover,
ul.products li.product.iga-card .iga-card__act.is-active:hover { background: #fff; background-color: #fff; color: #000; }

ul.products li.product.iga-card .iga-card__act.is-active svg.iga-hf path { fill: currentColor; }
ul.products li.product.iga-card .iga-card__act.is-active svg.iga-hf { animation: iga-card-beat .5s var(--iga-spring); }
ul.products li.product.iga-card .iga-card__act.is-on > svg { animation: iga-card-pop .45s var(--iga-spring); }

ul.products li.product.iga-card .iga-card__act--eye {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

ul.products li.product.iga-card .iga-card__act--eye svg { width: 18px; height: 12px; }

/* CWS loop add appends its spinner to the button. The wrap is absolute +
   padded for a full-size overlay; centre it in the disc instead, in the
   button's text colour (its own svg rule says `fill: inherit`). */
ul.products li.product.iga-card .iga-card__act.loading { pointer-events: none; }
ul.products li.product.iga-card .iga-card__act.loading > svg { display: none; }

ul.products li.product.iga-card .iga-card__act .cws-suite-loading-animation-wrap {
    position: static;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    background-color: transparent;
}

ul.products li.product.iga-card .iga-card__act .cws-suite-loading-animation-wrap svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Title, price, anchor price ---------- */

ul.products li.product.iga-card h2.iga-card__ttl {
    margin: 34px 0 0;
    padding: 0;
    color: var(--iga-ink);
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: pretty;
}

ul.products li.product.iga-card h2.iga-card__ttl.is-it { font-style: italic; }

ul.products li.product.iga-card h2.iga-card__ttl a {
    color: var(--iga-ink);
    font: inherit;
    text-decoration: none;
}

ul.products li.product.iga-card h2.iga-card__ttl a:hover { color: #000; text-decoration: underline; }

ul.products li.product.iga-card .iga-card__pr.price {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 8px;
    margin: 18px 0 0;
    padding: 0;
    color: var(--iga-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    transition: color .2s;
}

ul.products li.product.iga-card .iga-card__pr.price .amount,
ul.products li.product.iga-card .iga-card__pr.price bdi { color: inherit; font-size: inherit; font-weight: inherit; }
ul.products li.product.iga-card .iga-card__pr.price del { order: -1; margin: 0; color: #a5a5a3; font-weight: 400; opacity: 1; }
ul.products li.product.iga-card .iga-card__pr.price ins { margin: 0; color: var(--iga-cut); font-weight: inherit; text-decoration: none; background: none; }

ul.products li.product.iga-card .iga-card__pr.price .cws-anchor-price {
    display: block;
    flex-basis: 100%;
    margin-top: 14px;
    color: #333;
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
}

ul.products li.product.iga-card .iga-card__pr.price .cws-anchor-price > span { display: block; }
ul.products li.product.iga-card .iga-card__pr.price .cws-anchor-price .amount { font-weight: 400; }

ul.products li.product.iga-card:hover .iga-card__pr.price,
ul.products li.product.iga-card:hover .iga-card__pr.price .cws-anchor-price { color: #a5a5a3; }

@keyframes iga-card-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes iga-card-beat { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 55% { transform: scale(.92); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    ul.products li.product.iga-card .iga-card__act,
    ul.products li.product.iga-card .iga-card__act svg { transform: none; transition: opacity .2s; }
    ul.products li.product.iga-card .iga-card__act:hover,
    ul.products li.product.iga-card .iga-card__act:hover > svg { transform: none; }
    ul.products li.product.iga-card .iga-card__act.is-active svg.iga-hf,
    ul.products li.product.iga-card .iga-card__act.is-on > svg { animation: none; }
}