/*
 * fauna — product card + product grid.
 *
 * Separate from redesign.css on purpose: the card is the one component reused by
 * nine templates (home widgets, category, search, brand, bestseller, wishlist ×2,
 * page_full, delivery+payment), so its rules stay in one file that can be
 * reviewed and reverted on its own.
 *
 * Markup: shop/includes/product/product_cut.twig — root `article.fa-card.product-cut`.
 * The redesign classes are ADDED next to the legacy ones, so this file also has to
 * neutralise the bundle's rules for those legacy classes (`_css/final.min.css` is
 * immutable — its gulp3/node-sass build is gone).
 *
 * Values from design_handoff_faunamarket/README.md + the category prototype:
 * card white, radius 16, border border-100, shadow 0 8px 22px rgba(20,50,40,.06),
 * hover translateY(-4px); media 172px on surface-150; SKU 11/700 ink-300;
 * name 14/700 lh1.35; old price 13 ink-200 struck; price 19/800; buy button
 * radius 10, green (or a 40×40 mint icon button when a variant select is present).
 */

/* -------------------------------------------------------------- grid ------ */

.fa-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fa-gap-lg);
}

/* The category listing (handoff §2) is four across next to the 280px rail from
   1280px up, and drops to three below that — `--3` is the floor, not the shape. */
.fa-grid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1279px) {
    .fa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The legacy layout puts a Bootstrap clearfix on its wrappers; as a grid
   container those ::before/::after pseudo-elements become grid ITEMS and push the
   first row of cards out of place (caught on the first screenshot pass). */
.fa-grid::before,
.fa-grid::after { content: none; display: none; }

@media (max-width: 991px) {
    .fa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A category keeps its 280px filter rail on tablets. Three cards in the
   remaining column are only ~130–200px wide across the iPad range, so their
   title, price and actions collide. Two cards preserve the designed card. */
@media (min-width: 768px) and (max-width: 1199px) {
    .fa-cat .fa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .fa-grid,
    .fa-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ------------------------------------------------------------- card ------- */

.fa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-lg);
    box-shadow: var(--fa-shadow-card);
    overflow: hidden;
    transition: transform var(--fa-dur-micro) var(--fa-ease),
                box-shadow var(--fa-dur-micro) var(--fa-ease);
}

.fa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fa-shadow-hover);
    /* the flipper's back photo is z-index:-1 until hover; keep the card above
       its neighbours so the second photo is not clipped by the next card */
    z-index: 2;
}

/* bundle rules for the legacy classes that fight the new card */
.fa-card.product-cut { font-size: 1rem; }

/* The bundle paints .product-cut__container with its own em-based padding,
   background and border. Neutralise the paint — but NOT the padding: the body
   element carries both classes, and a `padding: 0` here (0,2,0) outranked
   `.fa-card__body { padding: 14px }` (0,1,0), so every product card on every
   page rendered with its text flush against the card border and the last row
   spilling over the bottom edge. The padding now lives on the two-class
   selector below, which wins over the bundle for the right reason. */
.fa-card .product-cut__container,
.fa-card .product-cut__container:last-child {
    background: none;
    border: 0;
}

.fa-card .fa-card__body,
.fa-card .fa-card__body:last-child { padding: 14px; }

/* the hover panel is gone: nothing must be parked outside the flow any more */
.fa-card .product-cut__container--hidden {
    position: static;
    visibility: visible;
    opacity: 1;
    z-index: auto;
}

.fa-card .product-cut__row:not(:last-child) { margin-bottom: 0; }

/* ---- media ---- */

/* Fixed media height (handoff: 172px in the category grid), NOT an aspect ratio:
   the shop's photos are ~185px thumbs on a white background, so a square box left
   a small white rectangle floating in a large grey field. White backing + a
   fixed height keeps every card in the row the same size. */
.fa-card__media {
    position: relative;
    margin: 0;
    border: 0;
    background: var(--fa-surface-0);
    height: 172px;
    padding: 10px;
    overflow: hidden;
}

.fa-card__media .product-photo,
.fa-card__media .flipper,
.fa-card__media .flipper__body,
.fa-card__media .flipper__front,
.fa-card__media .flipper__back { height: 100%; }

.fa-card__media .product-photo { max-width: none; }

.fa-card__media .product-photo__item {
    height: 100%;
    padding-bottom: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fa-card__media .product-photo__img,
.fa-card__media picture.product-photo__img {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    object-fit: contain;
    mix-blend-mode: normal;
}

/* The optimizer wraps every thumb in <picture>, so the constraint above landed
   on the WRAPPER while the <img> inside kept its natural size: a 185×247 photo
   drew 247px tall in a 152px box and the card clipped it top and bottom. The
   image itself has to be the thing that fits. */
.fa-card__media .product-photo__img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    object-fit: contain;
}

/* ---- badges (product_labels.twig) ---- */

.fa-card__media .product-photo__labels {
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.fa-card__media .product-photo__label {
    /* handoff: coral pill, 12px/800, radius 8 — not the bundle's 3.5em grey circle */
    width: auto;
    height: auto;
    line-height: 1.35;
    padding: 3px 9px;
    border-radius: var(--fa-radius-sm);
    background: var(--fa-ink-400);
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
}

.fa-card__media .product-photo__label:not(:first-child) { margin-top: 0; }
.fa-card__media .product-photo__label--discount { background: var(--fa-coral-500); }
.fa-card__media .product-photo__label--action { background: var(--fa-coral-500); }
.fa-card__media .product-photo__label--hit { background: var(--fa-green-500); }
.fa-card__media .product-photo__label--hot { background: var(--fa-amber-500); }

/* quick-view sits over the back photo of the flipper */
.fa-card .quick-view { background: rgba(255, 255, 255, .55); }

.fa-card .quick-view__btn {
    border-radius: var(--fa-radius-md);
    border: 0;
    background: var(--fa-ink-900);
    color: var(--fa-surface-0);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 14px;
}

/* wishlist remove (wishlist pages) */
.fa-card__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
}

/* ---- body ---- */

.fa-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--fa-gap-sm);
    flex: 1;
    padding: 14px;
    text-align: left;
}

.fa-card__sku {
    font-size: var(--fa-fs-micro);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--fa-ink-300);
}

.fa-card__sale {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.fa-card__sale-item {
    font-size: 11px;
    font-weight: 700;
    color: var(--fa-coral-700);
    background: var(--fa-mint-50);
    border-radius: var(--fa-radius-xs);
    padding: 2px 7px;
}

.fa-card__title {
    margin: 0;
    flex: 1;
    font-size: var(--fa-fs-card-title);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: normal;
}

/* Names run to 120+ characters in this catalogue; clamp so one long title cannot
   make its card taller than the rest of the row. The full name stays in the DOM
   (SEO + the title attribute the bundle's data-ellipsis sets). */
.fa-card__title-link {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* `.page a { color: green }` in redesign.css outranks a single class, so the
   card title has to be addressed from the card down. */
.fa-card .fa-card__title-link {
    color: var(--fa-ink-900);
    text-decoration: none;
}

.fa-card .fa-card__title-link:hover { color: var(--fa-green-500); }

.fa-card__archive {
    margin: 0;
    font-size: 13px;
    color: var(--fa-ink-400);
}

/* ---- price (product_price.twig) ---- */

.fa-card__price .product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--fa-gap-sm);
    font-size: 1rem;
    text-align: left;
}

.fa-card__price .product-price__old,
.product-price__old {
    order: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--fa-ink-200);
    text-decoration: line-through;
}

.fa-card__price .product-price__main {
    order: 2;
    display: flex;
    align-items: baseline;
    float: none;
    font-size: var(--fa-fs-price-card);
    font-weight: 800;
    line-height: 1.1;
    color: var(--fa-ink-900);
}

.fa-card__price .product-price__main-value,
.fa-card__price .product-price__main-coins,
.fa-card__price .product-price__main-cur,
.fa-card__price .product-price__old-value,
.fa-card__price .product-price__old-coins,
.fa-card__price .product-price__old-cur { float: none; }

/* the strike lives on .product-price__old; inherit puts the same computed
 * line on the value/cur spans (QA reads the span, visual is identical) */
.product-price__old-value,
.product-price__old-coins,
.product-price__old-cur { text-decoration: inherit; }

.fa-card__price .product-price__main-cur {
    padding-left: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fa-ink-400);
}

.fa-card__price .product-price__addition {
    order: 3;
    flex-basis: 100%;
    font-size: 12px;
    color: var(--fa-ink-400);
}

/* ---- actions: variant select + buy ---- */

.fa-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fa-gap-sm);
    margin: 2px 0 0;
    text-align: left;
}

/* Out of stock WITH variants: the buy slot is 40px wide for the icon button, and
   the "not available / notify me" block that replaces it was being squeezed into
   those 40px (three wrapped lines next to the select). Give it the whole row. */
.fa-card--variants .fa-card__buy:has(.product-cut__not-available:not(.hidden)) {
    flex: 1 0 100%;
}

.fa-card__variants {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.fa-card__variants .variants-select { margin: 0; }

.fa-card__variants .variants-select__field {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1.5px solid var(--fa-border-200);
    border-radius: var(--fa-radius-btn);
    background: var(--fa-surface-0);
    color: var(--fa-ink-900);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Buy + "in one click" sit side by side as one control group. */
.fa-card__buy {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fa-card__buy .product-cut__purchase-wrapper { display: block; flex: 1; min-width: 0; }
.fa-card__buy .product-cut__purchase-btn { float: none; }

.fa-card__buy .btn {
    width: 100%;
    /* fixed, not min-: the "one click" button next to it is 40px, and a 44px
       neighbour made the pair look misaligned */
    height: 40px;
    min-height: 40px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--fa-radius-btn);
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
    font-size: 13.5px;
    font-weight: 800;
    text-align: center;
}

/* The product-page rule ([data-product-scope] [data-product-button--add] .btn)
   also matches a card — every card is a [data-product-scope] — and its 44px tap
   target won on specificity, leaving the buy button 4px taller than the "one
   click" button beside it. Match it here. */
.fa-card[data-product-scope] .fa-card__buy .btn {
    height: 40px;
    min-height: 40px;
}

.fa-card__buy .btn:hover { background: var(--fa-green-600); }

/* Same glare as the hero CTAs (keyframes live in redesign.css, which loads
   before this file). A listing shows two dozen of these at once, so the sweep is
   slower than the hero's and staggered per column — without the offsets the
   whole grid would blink in unison. */
.fa-card__buy .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fa-card__buy .btn::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .5) 50%, transparent 100%);
    transform: translateX(-260%) rotate(14deg);
    animation: fa-shine 7s ease-in-out infinite;
    pointer-events: none;
}

.fa-card:nth-child(4n+2) .fa-card__buy .btn::after { animation-delay: .9s; }
.fa-card:nth-child(4n+3) .fa-card__buy .btn::after { animation-delay: 1.8s; }
.fa-card:nth-child(4n)   .fa-card__buy .btn::after { animation-delay: 2.7s; }

@media (prefers-reduced-motion: reduce) {
    .fa-card__buy .btn::after { animation: none; opacity: 0; }
}
.fa-card__buy .btn-default { background: var(--fa-mint-100); color: var(--fa-green-500); }
.fa-card__buy .btn-default:hover { background: var(--fa-green-500); color: var(--fa-surface-0); }

/* With a variant select the button becomes the handoff's 40×40 mint icon button
   (the include already renders an icon instead of a label in that case). */
.fa-card--variants .fa-card__buy { flex: 0 0 auto; }

.fa-card--variants .fa-card__buy .btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    /* Filled, like the labelled button on a single-variant card: the pale mint
       version read as a disabled control next to the live green ones. */
    background: var(--fa-green-500);
    color: var(--fa-surface-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fa-card--variants .fa-card__buy .btn:hover {
    background: var(--fa-green-600);
    color: var(--fa-surface-0);
}

/* The bundle pins .btn__icon with position:absolute + inset:0, so in a button
   that is not itself positioned the icon anchored to the page, not the button —
   it sat off-centre in the 40px card button. The button already centres its
   content with flex; the icon just has to stay in normal flow. */
.fa-card__buy .btn__icon {
    position: static;
    inset: auto;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fa-card--variants .fa-card__buy .btn__icon { width: 20px; height: 20px; }
.fa-card__buy .btn__icon .svg-icon { width: 100%; height: 100%; }
/* line icons keep their outline here too (cards.css loads after redesign.css) */
.fa-card__buy .btn__icon .svg-icon--line { fill: none; stroke: currentColor; }
/* No flex gap: the button's markup carries whitespace text nodes, and in a flex
   box each one is an anonymous item that the gap then spaces out — that is what
   pushed the lone icon 4px right of centre. The label gets the spacing instead. */
.fa-card__buy .btn { gap: 0; }
.fa-card__buy .btn__label { margin-left: 8px; }
/* the bundle sizes .btn__icon as 1.5em × 1em — a non-square box, so the glyph
   sat left of centre in the 40px button. Square box, and the svg fills it. */
.fa-card__buy .btn__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.fa-card__buy .btn__icon .svg-icon { display: block; }
.fa-card__buy .btn:not(.btn--narrow) { padding-inline: 12px; }
.fa-card--variants .fa-card__buy .btn:not(.btn--narrow) { padding-inline: 0; }

/* out of stock */
.fa-card .product-cut__not-available { margin: 0; }

.fa-card .product-cut__not-available-info {
    font-size: 13px;
    font-weight: 700;
    color: var(--fa-ink-400);
}

.fa-card .product-cut__not-available-link {
    color: var(--fa-green-500);
    font-size: 13px;
    border-bottom-color: var(--fa-green-500);
}

/* ---- price row: price left, secondary actions right ---- */

.fa-card__pricerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fa-card__pricerow .fa-card__price { min-width: 0; }

/* ---- secondary actions: wishlist / compare ---- */

.fa-card__extra { margin: 0; flex: 0 0 auto; }

.fa-card__extra .product-actions__list {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

/* Icon only in a card: the label is what the tooltip (title) says, and two
   labelled links took a whole row each. The link keeps its markup — the module
   JS drives it — but it is stretched over the icon so the whole 28px box is the
   click target. */
.fa-card__extra .product-actions__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    margin: 0;
    color: var(--fa-ink-300);
}

.fa-card__extra .product-actions__item:hover { color: var(--fa-green-500); }

/* the bundle gives the second action a divider (padding-left + border-left),
   which ate half of the 28px box and squashed the icon to 13px wide */
.fa-card__extra .product-actions__item--separator {
    padding-left: 0;
    border-left: 0;
}

.fa-card__extra .product-actions__icon { flex: 0 0 auto; }

.fa-card__extra .product-actions__icon,
.fa-card__extra .product-actions__icon svg,
.fa-card__extra .svg-icon {
    width: 21px;
    height: 21px;
    color: inherit;
    /* the bundle paints every .svg-icon with fill: currentColor, which turns an
       outline path into a solid blob */
    fill: none;
    stroke: currentColor;
}

.fa-card__extra .product-actions__link,
.fa-card__extra a,
.fa-card__extra button.product-actions__link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    /* the text stays in the DOM for assistive tech, it just does not paint */
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
}

/* a hidden state (compare "open in list" before it is added) must not swallow
   the clicks meant for the visible one */
.fa-card__extra .product-actions__link.hidden { display: none; }

/* ---- "see more products" tile (widget_primary) ---- */

.fa-card--more {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--fa-green-500);
    text-decoration: none;
    font-weight: 700;
    background: var(--fa-mint-50);
    min-height: 220px;
}

.fa-card--more .btn-more-products__icon { width: 32px; height: 32px; margin: 0 auto 8px; }
.fa-card--more:hover { color: var(--fa-green-600); }

/* ---- mobile ---- */

@media (max-width: 767px) {
    .fa-card__media { height: 150px; padding: 8px; }
    .fa-card .fa-card__body,
    .fa-card .fa-card__body:last-child { padding: 11px; }
    .fa-card__body { gap: 6px; }
    .fa-card__title { font-size: 13.5px; }
    .fa-card__price .product-price__main { font-size: 16.5px; }
    /* they cost nothing now (two 21px icons in the price row), so they stay */
    .fa-card__extra { display: block; }
    /* keep select + icon button on ONE row (a full-width icon button reads as a
       broken control); only the out-of-stock notice takes the whole row */
    .fa-card--variants .fa-card__buy { flex: 0 0 var(--fa-tap-target); }
    .fa-card--variants .fa-card__buy .btn { width: var(--fa-tap-target); min-width: var(--fa-tap-target); }
    /* same specificity as the desktop 40px rule above, so the touch target wins here */
    .fa-card[data-product-scope] .fa-card__buy .btn {
        height: var(--fa-tap-target);
        min-height: var(--fa-tap-target);
    }
    .fa-card__variants .variants-select__field { min-height: var(--fa-tap-target); }
}

/* ---- compact thumb (product_thumb.twig: sidebars, compare, related) ------- */

.product-thumb {
    background: var(--fa-surface-0);
    border: 1px solid var(--fa-border-100);
    border-radius: var(--fa-radius-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* product-thumb.scss centres the whole card; the handoff card is left-aligned */
    text-align: left;
}

.product-thumb .product-photo__item { border: 0; }

/* equal-height cards in a row, price pinned to the bottom edge — otherwise a
   two-line name drags its price down and the row reads as broken */
.fa-row__item > .product-thumb { height: 100%; }
.product-thumb__title { flex: 1 1 auto; }

/* The photo drew 0×0 in every "Вам може сподобатися" / sidebar / compare card:
   product-thumb.scss gives it `max-width:200px; margin:0 auto`, and inside this
   column flexbox the auto cross-margins shrink-to-fit a box whose only content
   is an absolutely-positioned <img> — nothing in it had a size, so the card
   showed name and price with a gap where the picture belongs. Fixed frame plus
   the same contain-fit as .fa-card__media (handoff: 110px photo well). */
.product-thumb__photo {
    max-width: none;
    margin: 0;
    height: 110px;
    border-radius: var(--fa-radius-sm);
    background: var(--fa-surface-50);
    overflow: hidden;
}

.product-thumb__photo .product-photo { max-width: none; height: 100%; margin: 0; }

.product-thumb__photo .product-photo__item {
    height: 100%;
    padding-bottom: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumb__photo .product-photo__img,
.product-thumb__photo picture.product-photo__img {
    position: static;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    object-fit: contain;
}

/* the optimizer wraps thumbs in <picture>, so the <img> needs the fit too */
.product-thumb__photo .product-photo__img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    object-fit: contain;
}
.product-thumb__title { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.product-thumb__title .link { color: var(--fa-ink-900); text-decoration: none; }
.product-thumb__title .link:hover { color: var(--fa-green-500); }

.fa-price-thumb .product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1rem;
}

.fa-price-thumb .product-price__old {
    font-size: 12px;
    font-weight: 600;
    color: var(--fa-ink-200);
    text-decoration: line-through;
}

.fa-price-thumb .product-price__main {
    display: flex;
    align-items: baseline;
    float: none;
    font-size: 15px;
    font-weight: 800;
    color: var(--fa-ink-900);
}

.fa-price-thumb .product-price__main-value,
.fa-price-thumb .product-price__main-coins,
.fa-price-thumb .product-price__main-cur { float: none; }
.fa-price-thumb .product-price__main-cur { padding-left: 3px; font-size: 12px; color: var(--fa-ink-400); }