@media only screen and (min-width: 320px) {

    /* ==========================================================================
       Product listing card
       Covers BOTH markups with one set of style declarations:
         - Block:  WooCommerce Product Collection / Product Template
                   (li.wc-block-product …)
         - Native: WooCommerce archive loop (.site-content #main ul.products li.product …),
                   whose image is wrapped in .loop-product-image via
                   includes/shop-functions.php so it mirrors the block.
       Column count comes from block settings / WooCommerce settings, so it is
       not handled here. Only the card internals are styled.
       ========================================================================== */

    .wc-block-product-template,
    .site-content #main ul.products {
        /* Inner breathing room around the product photo (tunable) */
        display:flex;
        flex-wrap:wrap;
        gap: 15px;
        justify-content: flex-start;
        margin:0px;
    }

    /* Card layout: image on top, then title (left) + price (right), button below.
       Block: the flat block children sit directly in the li grid.
       Native: image/title/price live inside the loop <a>, which becomes the
       grid; the li is a flex column so the add-to-cart button stacks below. */
    li.wc-block-product {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "price"
            "button";
        column-gap: 1rem;
        align-items: baseline;
        list-style: none;
        margin: 0px;
    }

    .site-content #main ul.products li.product {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin-bottom: 0px;
        float:none;
        width:calc(50% - (var(--product-img-padding)/2));
        margin:0;
    }
    .site-content #main ul.products li.product > a.woocommerce-loop-product__link {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "price";
        column-gap: 1rem;
        align-items: baseline;
    }

    /* ---- Product image: turn the white photo background into grey ----------
       mix-blend-mode multiplies the (white) photo background with the grey
       container behind it: white -> grey, while the darker product stays. */
    .wc-block-product .wc-block-components-product-image,
    .site-content #main ul.products li.product .loop-product-image {
        grid-area: image;
        position: relative;
        background-color: var(--product-img-bg);
        isolation: isolate; /* keep the blend scoped to this container */
        overflow: hidden;
        margin-bottom: 1rem;
    }
    /* Inset the photo: block pads the inner link, native pads the img itself. */
    .wc-block-product .wc-block-components-product-image a {
        display: block;
        padding: var(--product-img-padding);
    }
    .site-content #main ul.products li.product .loop-product-image img {
        padding: var(--product-img-padding);
        box-sizing: border-box;
    }
    .wc-block-product .wc-block-components-product-image img,
    .site-content #main ul.products li.product .loop-product-image img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        mix-blend-mode: multiply;
        transition: transform 0.6s ease;
    }
    .wc-block-product .wc-block-components-product-image a:hover img,
    .site-content #main ul.products li.product .loop-product-image:hover img {
        transform: scale(1.04);
    }
    

    /* ---- Hover indicator: "go to product" diagonal arrow in a circle ------
       ::before draws the light circle, ::after masks the arrow on top.
       Both fade/slide in on hover; clicks pass through to the product link. */
    .wc-block-product .wc-block-components-product-image::before,
    .wc-block-product .wc-block-components-product-image::after,
    .site-content #main ul.products li.product .loop-product-image::before,
    .site-content #main ul.products li.product .loop-product-image::after {
        content: "";
        position: absolute;
        top: var(--card-icon-offset);
        right: var(--card-icon-offset);
        width: var(--card-icon-size);
        height: var(--card-icon-size);
        opacity: 0;
        transform: translateY(6px) scale(0.9);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }
    .wc-block-product .wc-block-components-product-image::before,
    .site-content #main ul.products li.product .loop-product-image::before {
        z-index: 2;
        border-radius: 50%;
        background-color: var(--card-icon-bg);
    }
    .wc-block-product .wc-block-components-product-image::after,
    .site-content #main ul.products li.product .loop-product-image::after {
        z-index: 3;
        background-color: var(--card-icon-color);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M17 7H8M17 7V16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 45% no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M17 7H8M17 7V16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 45% no-repeat;
    }
    .wc-block-product .wc-block-components-product-image:hover::before,
    .wc-block-product .wc-block-components-product-image:hover::after,
    .site-content #main ul.products li.product .loop-product-image:hover::before,
    .site-content #main ul.products li.product .loop-product-image:hover::after {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
        .wc-block-product .wc-block-components-product-image a img,
        .wc-block-product .wc-block-components-product-image::before,
        .wc-block-product .wc-block-components-product-image::after,
        .site-content #main ul.products li.product .loop-product-image img,
        .site-content #main ul.products li.product .loop-product-image::before,
        .site-content #main ul.products li.product .loop-product-image::after {
            transition: opacity 0.3s ease;
            transform: none;
        }
    }

    /* ---- Title (left) ------------------------------------------------------- */
    .wc-block-product .wp-block-post-title,
    .site-content #main ul.products li.product .woocommerce-loop-product__title {
        grid-area: title;
        text-align: left;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }
    .wc-block-product .wp-block-post-title a,
    .site-content #main ul.products li.product .woocommerce-loop-product__title {
        color: var(--font-clr);
        text-decoration: none;
        padding:0px;
    }
    .wc-block-product .wp-block-post-title a:hover,
    .site-content #main ul.products li.product > a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
        color: var(--link-hover-clr);
    }

    /* ---- Price (right) ------------------------------------------------------
       .woocommerce prefix on the native selector beats WooCommerce's own
       `.woocommerce .site-content #main ul.products li.product .price` colour rule. */
    .wc-block-product .wp-block-woocommerce-product-price,
    .woocommerce .site-content #main ul.products li.product .price {
        grid-area: price;
        text-align: left;
        white-space: nowrap;
        align-self: flex-start;
        color: var(--font-clr);
    }

    /* ---- Add to cart / Choose options button -------------------------------
       Designed to match the brand's minimal text-style buttons (btn-no-bg):
       no background, uppercase, with an animated underline on hover.
       Block: the button container is a grid-area of the card grid.
       Native: the button is a flex child of the li (stacks below the link),
       aligned to the start so it shrinks to its text width. */
    .wc-block-product .wp-block-woocommerce-product-button,
    .site-content #main ul.products li.product > a.button.add_to_cart_button {
        text-align: left;
        margin-top: 0.85rem;
    }
    .wc-block-product .wp-block-woocommerce-product-button {
        grid-area: button;
    }
    .site-content #main ul.products li.product > a.button.add_to_cart_button {
        align-self: flex-start;
    }
    .site .wc-block-product-template .wc-block-product .wc-block-components-product-button__button,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button {
        display: inline-block;
        width: auto;
        position: relative;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        background-color: transparent;
        color: var(--font-clr);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 1.4;
        transition: color 0.3s ease;
        overflow: visible;
    }
    .site .wc-block-product .wc-block-components-product-button__button::after,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }
    .site .wc-block-product .wc-block-components-product-button__button:hover,
    .site .wc-block-product .wc-block-components-product-button__button:focus,
    .site .wc-block-product-template .wc-block-product .wc-block-components-product-button__button:hover,
    .site .wc-block-product-template .wc-block-product .wc-block-components-product-button__button:focus,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button:hover,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button:focus {
        background: none;
        background-color: transparent;
        color: var(--link-hover-clr);
    }
    .site .wc-block-product .wc-block-components-product-button__button:hover::after,
    .site .wc-block-product .wc-block-components-product-button__button:focus::after,
    .site .wc-block-product-template .wc-block-product .wc-block-components-product-button__button:hover::after,
    .site .wc-block-product-template .wc-block-product .wc-block-components-product-button__button:focus::after,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button:hover::after,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button:focus::after {
        transform: scaleX(1);
    }

    /* Leading icon on the button: + for simple (add to cart),
       arrow for variable (choose options). Color follows currentColor. */
    .site .wc-block-product-template .wc-block-product .wc-block-components-product-button__button::before,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button::before {
        content: "";
        display: inline-block;
        width: 0.85em;
        height: 0.85em;
        margin-right: 0.4em;
        vertical-align: -0.08em;
        background-color: currentColor;
        -webkit-mask: var(--btn-icon) center / contain no-repeat;
                mask: var(--btn-icon) center / contain no-repeat;
    }
    .site .wc-block-product .wc-block-components-product-button__button.product_type_simple,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button.product_type_simple {
        --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V19M5 12H19' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .site .wc-block-product .wc-block-components-product-button__button.product_type_variable,
    .site .site-content #main ul.products li.product > a.button.add_to_cart_button.product_type_variable {
        --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12H20M20 12 14 6M20 12 14 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* "Näytä ostoskori" link shown after adding to cart */
    .site .wc-block-product .added_to_cart,
    .site .site-content #main ul.products li.product .added_to_cart {
        display: inline-block;
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 0.4rem;
        font-size: 0.72rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--link-clr);
    }
    .site .wc-block-product .added_to_cart:hover,
    .site .site-content #main ul.products li.product .added_to_cart:hover {
        color: var(--link-hover-clr);
    }
}

@media only screen and (min-width: 768px) {
    
}

@media only screen and (min-width: 990px) {
    .site-content #main ul.products li.product {
        width:calc(25% - (var(--product-img-padding)*3/4));
    }
}

@media only screen and (min-width: 1280px) {
    /* Restore title (left) + price (right) on the same row from tablet up. */
    li.wc-block-product {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "image  image"
            "title  price"
            "button button";
    }
    .site-content #main ul.products li.product > a.woocommerce-loop-product__link {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "image image"
            "title price";
    }
    .wc-block-product .wp-block-woocommerce-product-price,
    .woocommerce .site-content #main ul.products li.product .price {
        text-align: right;
    }
}