/**
 * PhotoCab product card.
 *
 * Targets the standard WooCommerce loop markup in two layouts:
 *
 *   .woocommerce ul.products > li.product      grid  - category archives,
 *                                              search, [products] shortcodes
 *   .products.is-layout-slider .product        slider - the related /
 *                                              upsell carousel on a product
 *
 * They render identical card markup, but the slider wraps each card in a
 * `.flexy-item` instead of a `<li>`, so the grid selector alone misses it.
 * Both are folded into one `:is()` so the card is defined exactly once.
 * The grid and float-neutralising rules above stay grid-only on purpose -
 * flexy owns the slide widths in the carousel.
 *
 * Markup this expects (Blocksy + WPC Linked Variation), in DOM order:
 *
 *   li.product / .flexy-item > .product
 *     figure
 *       span.onsale
 *       a.ct-media-container > img.wp-post-image + img.ct-swap
 *     h4.woocommerce-loop-product__title > a
 *     span.price > span.sale-price > del + ins
 *     div.wpclv-attributes
 *       div.wpclv-attribute > .wpclv-attribute-label + .wpclv-terms
 *
 * Numbers come from the Claude Design prototype; see assets/css/tokens.css.
 */

/* ---------------------------------------------------------------- Grid -- */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pc-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 999px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 689px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--pc-space-3);
    }
}

/* Woo/Blocksy ship float- and percentage-width rules for the legacy
   `columns-N` layout. Neutralise them so the grid above is in charge. */
.woocommerce ul.products > li.product {
    width: auto;
    margin: 0;
    float: none;
    clear: none;
}

/* --------------------------------------------------------------- Card -- */

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--pc-space-3);
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-card);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product)::before,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product)::after {
    content: none;
}

/* -------------------------------------------------------------- Media -- */

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) > figure {
    position: relative;
    margin: 0;
    border-radius: var(--pc-radius-ctl);
    overflow: hidden;
    background: var(--pc-surface);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .ct-media-container {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--pc-surface);
}

/* The prototype letterboxes product shots rather than cropping them, so
   `contain` here is deliberate - `cover` would cut off camera bodies. */
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .ct-media-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: auto !important; /* overrides the inline ratio Blocksy prints */
    background: var(--pc-surface);
}

/* Second image cross-fades in on hover (Blocksy's .ct-swap). */
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .ct-media-container img.ct-swap {
    opacity: 0;
    transition: opacity 300ms ease;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .ct-media-container:hover img.ct-swap {
    opacity: 1;
}

/* -------------------------------------------------------------- Badge -- */

/*
 * Every badge kind a card can print - the sale percentage, the stock badge
 * ("В дорозі") and Blocksy's own `ct-woo-badge-*` - shares one geometry and
 * one type size here; only the colours differ below. Blocksy's defaults are
 * 12px/500 at 14px/14px, which is the product-page placement (style.css);
 * in a card the badge sits at 8px/8px.
 *
 * `.products .product` is deliberately broader than the card selector used
 * elsewhere in this file so the rule covers every listing Woo/Blocksy can
 * print (archive grid, related/upsell slider, shortcode rows).
 */
body :is(.woocommerce ul.products > li.product, .products .product, .products.is-layout-slider .product) :is(.onsale, .out-of-stock-badge, [class*="ct-woo-badge-"]) {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    margin: 0;
    min-height: 0;
    padding: 3px 7px;
    font-size: var(--pc-fs-label);
    font-weight: var(--pc-fw-regular);
    line-height: 1.3;
    letter-spacing: var(--pc-ls-label);
    border-radius: var(--pc-radius-ctl);
}

body :is(.woocommerce ul.products > li.product, .products .product, .products.is-layout-slider .product) .onsale {
    background: var(--pc-accent-400);
    color: var(--pc-accent-700);
}

/* -------------------------------------------------------------- Title -- */

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .woocommerce-loop-product__title {
    min-height: 35px;
    margin: 0;
    padding: 0;
    font-size: var(--pc-fs-card);
    font-weight: var(--pc-fw-regular);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .woocommerce-loop-product__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--pc-fs-card);
    line-height: var(--pc-lh-card);
    color: var(--pc-ink-900);
    transition: color var(--pc-dur-fast) ease;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .woocommerce-loop-product__title a:hover {
    color: var(--pc-accent-500);
}

/* -------------------------------------------------------------- Price -- */

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price .sale-price {
    display: flex;
    align-items: baseline;
    gap: 0 var(--pc-space-2);
    margin: 0;
    font-size: var(--pc-fs-price);
    font-weight: var(--pc-fw-medium);
    color: var(--pc-ink-900);
}

/* Woo prints the old price first; the design leads with the current one. */
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price ins {
    order: 1;
    background: none;
    text-decoration: none;
    font-size: var(--pc-fs-price);
    font-weight: var(--pc-fw-medium);
    color: var(--pc-ink-900);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price del {
    order: 2;
    opacity: 1;
    font-size: var(--pc-fs-old);
    font-weight: var(--pc-fw-regular);
    color: var(--pc-ink-400);
    text-decoration: line-through;
}

/* --------------------------------------------------- Variation attrs -- */

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attributes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-label {
    font-size: var(--pc-fs-label);
    line-height: 1.3;
    letter-spacing: var(--pc-ls-label);
    color: var(--pc-ink-600);
}

/* The swatch row never wraps: a card that grows a second row of swatches
   shifts everything under it and breaks the grid's rhythm. Items shrink and
   the gap follows the card's width instead, so six colours fit a 148px row on
   a phone the same way they fit a 262px one on a desktop. */
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-terms {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attributes:has(.wpclv-attribute) ~ .wpclv-attributes:has(.wpclv-attribute) {
    margin-top: var(--pc-space-5);
}

/* ---- Colour swatches (terms carrying an image) ---- */

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-terms {
    margin: 0;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-more {
    flex: 0 0 auto;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attributes .wpclv-terms {
    font-size: var(--pc-fs-label);
    line-height: 1.3em;
    letter-spacing: var(--pc-ls-label);
    color: var(--pc-ink-600);
    white-space: nowrap;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attributes .wpclv-terms .wpclv-more {
    margin-left: -3px;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attributes .wpclv-terms .wpclv-term:last-of-type {
    margin-right: 0;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute .wpclv-more {
    width: 24px;
    height: 24px;
    margin: 0;
    float: none;
    line-height: inherit;
    padding: 0;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute .wpclv-more a {
    --theme-text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-more a:hover {
    color: var(--pc-accent-500);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-pa_kolir .wpclv-terms {
    column-gap: clamp(4px, 4%, 16px);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-pa_kolir .wpclv-term-image {
    flex: 0 1 var(--pc-swatch-size);
    width: auto;
    height: auto;
    aspect-ratio: 1;
    min-width: var(--pc-swatch-min);
    line-height: 20px;
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
}



:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image a,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image span {
    border-radius: 0;
    background: none;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image a,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image span {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    line-height: 0;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image img,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image .pc-swatch {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 50%;
    border: 1px solid var(--pc-border);
    object-fit: cover;
    background: var(--pc-surface-2);
    transition: transform var(--pc-dur-fast) ease, box-shadow var(--pc-dur-fast) ease;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image:hover img,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image:hover .pc-swatch {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--pc-surface), 0 0 0 3.5px var(--pc-accent-500);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image.active img,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image.active .pc-swatch {
    box-shadow: 0 0 0 2px var(--pc-surface), 0 0 0 3.5px var(--pc-accent-500);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image .pc-swatch {
    border: 0;
}

    /* ---- Text chips (photo paper counts) ---- */

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute:not(.wpclv-attribute-pa_kolir) .wpclv-terms {
    /*gap: 6px;*/
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-pa_fotopapir .wpclv-terms {
    column-gap: clamp(var(--pc-space-1), 2.5%, var(--pc-space-2));
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-pa_fotopapir .wpclv-terms .wpclv-term {
    height: auto;
    flex: 0 1 auto;
    min-width: var(--pc-chip-min);
    white-space: nowrap;
    margin: 0;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-pa_fotopapir .wpclv-terms .wpclv-term span,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-pa_fotopapir .wpclv-terms .wpclv-term a {
    padding: 0;
    background: none;
    line-height: 14px;
    height: 14px;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attributes .wpclv-terms .wpclv-term:not(.wpclv-term-image) span,
:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attributes .wpclv-terms .wpclv-term:not(.wpclv-term-image) a {
    --theme-text-decoration: none;

    border-radius: 0;
    background-color: unset;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term:not(.wpclv-term-image) {
    min-width: 40px;
    padding: 4px 4px;
    text-align: center;
    font-size: var(--pc-fs-label);
    font-weight: var(--pc-fw-regular);
    letter-spacing: var(--pc-ls-label);
    color: var(--pc-ink-600);
    background: transparent;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-ctl);
    cursor: pointer;
    transition: border-color var(--pc-dur-fast) ease, color var(--pc-dur-fast) ease;
}


:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term:not(.wpclv-term-image) a {
    color: inherit;
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term:not(.wpclv-term-image):hover {
    border-color: var(--pc-accent-500);
    color: var(--pc-accent-500);
}

:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term:not(.wpclv-term-image).active {
    border-width: 1.5px;
    border-color: var(--pc-accent-500);
    color: var(--pc-accent-500);
    font-weight: var(--pc-fw-medium);
}

@media (prefers-reduced-motion: reduce) {
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .ct-media-container img.ct-swap,
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image img,
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image .pc-swatch,
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term:not(.wpclv-term-image) {
        transition: none;
    }

    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image:hover img,
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image:hover .pc-swatch {
        transform: none;
    }
}


@media screen and (max-width: 999px) {
    /*:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {*/
    /*    padding: var(--pc-space-2);*/
    /*}*/

	/*:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image img,*/
	/*:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term-image .pc-swatch {*/
	/*	width: 24px;*/
	/*	height: 24px;*/
	/*}*/

	/*:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-attribute-pa_kolir .wpclv-term-image {*/
	/*	width: 24px;*/
	/*	height: 24px;*/
	/*}*/

	/*:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .wpclv-term:not(.wpclv-term-image) {*/
	/*	min-width: 24px;*/
	/*}*/

}

@media screen and (max-width: 849px) {

	/* Narrower cards: only the ideal size steps down - the row keeps one formula. */
	:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {
		--pc-swatch-size: 24px;
	}
}

@media screen and (max-width: 689.98px) {
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {
        /*padding: var(--pc-space-2);*/
    }

    [data-products] .product {
        --horizontal-alignment: left;
        --text-horizontal-alignment: left;
    }

    .sale-price {
        justify-content: flex-start;
    }

    /* Narrower cards: only the ideal size steps down - the row keeps one formula. */
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {
        --pc-swatch-size: 24px;
    }

    /* On a phone the card is narrow: the struck-out price steps down a
       size and sits tighter to the current one. */
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price,
    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price .sale-price {
        gap: 0 var(--pc-space-1);
    }

    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price del {
        font-size: 10px;
    }
}

@media screen and (max-width: 574px) {
	/* Narrower cards: only the ideal size steps down - the row keeps one formula. */
	:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {
		--pc-swatch-size: 24px;
	}

	:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .woocommerce-loop-product__title a {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

@media screen and (max-width: 429px) {
	:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {
		padding: var(--pc-space-2);
	}

	/* Phone: the smallest step the design allows. */
	:is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) {
		--pc-swatch-size: 22px;
	}

    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price ins {
        font-size: 13px;
    }

    :is(.woocommerce ul.products > li.product, .products.is-layout-slider .product) .price del {
        font-size: 9px;
    }
}