/**
 * Product tile system — SINGLE FILE for tile look & feel.
 *
 * Markup: inc/woocommerce-product-tile.php (st_render_product_tile)
 * Block fallback: inc/woocommerce-blocks-oos.php + assets/js/st-tile-inline.js
 *
 * Change tile appearance here. Do not scatter .product-card rules in woocommerce.css.
 */

:root {
    --st-tile-action-size: 30px;
    --st-tile-action-size-desktop: 32px;
    --st-tile-action-icon: 15px;
    --st-tile-action-icon-desktop: 16px;
    --st-tile-action-border: #d1bc9b;
    --st-tile-action-bg: #f4f1e6;
    --st-tile-action-bg-hover: #efe8d6;
    --st-tile-action-color: #967e5b;
    --st-tile-action-color-hover: #8b7355;
    --st-tile-meta-padding: 6px 10px 14px;
    --st-tile-info-padding: 8px 10px 2px;
    --st-tile-title-size: 0.8rem;
    --st-tile-price-size: 0.85rem;
    --st-tile-inline-col-gap: 4px;
    --st-tile-stack-width: 150px;
}

@media (max-width: 768px) {
    :root {
        --st-tile-action-size: 26px;
        --st-tile-action-icon: 13px;
    }

    .st-frontpage-rail .product-card-meta {
        --st-tile-action-size: 26px;
    }

    .st-frontpage-rail--single-row[data-rail-items="2"] .product-card-meta {
        --st-tile-action-size: 30px;
        --st-tile-action-icon: 15px;
    }

    .product-card .product-card-info {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .product-card .product-card-price,
    .product-card .product-card-price .price {
        padding-bottom: 0 !important;
    }

    .woocommerce-listing .product-card .product-card-info {
        padding-bottom: 8px !important;
    }

    .woocommerce-listing .product-card .product-card-price,
    .woocommerce-listing .product-card .product-card-price .price {
        padding-bottom: 4px !important;
    }
}

@media (min-width: 769px) {
    body.home .product-card .product-card-info,
    body.front-page .product-card .product-card-info {
        padding-bottom: 8px !important;
    }

    body.home .product-card .product-card-price,
    body.home .product-card .product-card-price .price,
    body.front-page .product-card .product-card-price,
    body.front-page .product-card .product-card-price .price {
        padding-bottom: 0 !important;
    }
}

.product-card {
    container-type: inline-size;
    container-name: st-tile;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s ease;
}

ul.products > li.product-card,
ul.products > li.product,
.wc-block-grid__products > li.wc-block-grid__product,
ul.wc-block-product-template > li.wc-block-product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.product-card-link {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    color: inherit;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.product-card-link:active,
.product-card-link:focus {
    color: inherit;
    background-color: transparent;
    outline: none;
}

/* Button row outside link; price lives in .product-card-info under the title. */
.product-card > .product-card-meta,
.product-card-info > .product-card-meta {
    flex: 0 0 auto;
    margin-top: auto;
    padding: var(--st-tile-meta-padding);
    box-sizing: border-box;
}

.sp-liked-products-page .product-card > .product-card-meta,
.sp-liked-products-page .product-card-info > .product-card-meta {
    padding-bottom: 14px;
}

/* Woo blocks: meta lives inside .product-card-info; stretch info so buttons pin to tile bottom. */
.product-card:not(:has(> .product-card-meta)) .product-card-info {
    flex: 1 1 auto;
    min-height: 0;
}

.product-card-info > .product-card-meta {
    padding-top: 6px;
}

.product-card-image {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Ankare för REA-märke även om andra regler nollar position på wrapper */
.woocommerce-listing ul.products li.product .product-card-image {
    position: relative !important;
}

.product-card-image img {
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.03);
}

.product-card.out-of-stock:hover .product-card-image img {
    transform: none;
}

/* Title + price stack; no flex-grow gap before the button row. */
.product-card-info {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--st-tile-info-padding);
    gap: 2px;
}

.product-card-info .product-card-price {
    margin: 0 !important;
    line-height: 1.2;
    text-align: center !important;
}

.product-card-info .product-card-price .price {
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 6px;
    row-gap: 0;
    text-align: center !important;
}

.product-card-info .product-card-price del {
    display: inline !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    opacity: 0.75;
}

.product-card-info .product-card-price ins {
    display: inline !important;
    text-decoration: none !important;
}

/* Tile action row [♡] pris [🛒] — one rule set for every .product-card (no per-page scopes). */
.product-card-meta:has(> .product-card-price--in-meta) {
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto !important;
    column-gap: var(--st-tile-inline-col-gap) !important;
    align-items: center !important;
}

.product-card:has(.product-card-meta .product-card-price--in-meta) .product-card-price--in-info {
    display: none !important;
}

.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
    line-height: 1.2;
    text-align: center !important;
}

/* Regular price: one line (amount + kr). */
.product-card-meta:has(> .product-card-price--in-meta:not(:has(.price del))) .product-card-price--in-meta {
    white-space: nowrap;
}

.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .price {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline;
    justify-content: center !important;
    width: 100%;
    max-width: 100%;
    column-gap: 4px;
    text-align: center !important;
    white-space: nowrap;
}

/* Sale price: original (del) above sale (ins), each row keeps amount + kr together. */
.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .price:has(del):has(ins) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1px;
    white-space: normal;
}

.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .price span,
.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .price bdi,
.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .woocommerce-Price-amount,
.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .woocommerce-Price-currencySymbol {
    display: inline !important;
    white-space: nowrap;
}

.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta del,
.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta ins {
    display: block !important;
    width: 100%;
    text-align: center !important;
    line-height: 1.15;
    white-space: nowrap;
}

.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta del {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    opacity: 0.75;
}

.product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta ins {
    text-decoration: none !important;
}

.product-card-meta:has(> .product-card-price--in-meta) .st-tile-like {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start;
}

.product-card-meta:has(> .product-card-price--in-meta) .st-tile-quick-add {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end;
}

.product-card-meta:has(> .product-card-price--in-meta):not(:has(.st-tile-quick-add))::after {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

.product-card-meta:has(> .product-card-price--in-meta):not(:has(.st-tile-like))::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/*
 * Narrow tile (e.g. mobile 3-col): price row, then [♡] … [🛒] below.
 * Container query catches any tight grid; frontpage rail forces stack on mobile.
 */
@container st-tile (max-width: 150px) {
    .product-card-meta:has(> .product-card-price--in-meta) {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        row-gap: 6px !important;
        column-gap: 0 !important;
        align-items: center !important;
    }

    .product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        justify-content: center !important;
        width: 100%;
        max-width: 100%;
    }

    .product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .price {
        justify-content: center !important;
        text-align: center !important;
        width: 100%;
    }

    .product-card-meta:has(> .product-card-price--in-meta) .st-tile-like {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start;
    }

    .product-card-meta:has(> .product-card-price--in-meta) .st-tile-quick-add {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end;
    }

    .product-card-meta:has(> .product-card-price--in-meta):not(:has(.st-tile-quick-add))::after {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .product-card-meta:has(> .product-card-price--in-meta):not(:has(.st-tile-like))::before {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

@media (max-width: 768px) {
    .st-frontpage-rail__list .product-card-meta:has(> .product-card-price--in-meta) {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        row-gap: 6px !important;
        column-gap: 0 !important;
        align-items: center !important;
    }

    .st-frontpage-rail__list .product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        justify-content: center !important;
        width: 100%;
        max-width: 100%;
    }

    .st-frontpage-rail__list .product-card-meta:has(> .product-card-price--in-meta) .product-card-price--in-meta .price {
        justify-content: center !important;
        text-align: center !important;
        width: 100%;
    }

    .st-frontpage-rail__list .product-card-meta:has(> .product-card-price--in-meta) .st-tile-like {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start;
    }

    .st-frontpage-rail__list .product-card-meta:has(> .product-card-price--in-meta) .st-tile-quick-add {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end;
    }

    .st-frontpage-rail__list .product-card-meta:has(> .product-card-price--in-meta):not(:has(.st-tile-quick-add))::after {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .st-frontpage-rail__list .product-card-meta:has(> .product-card-price--in-meta):not(:has(.st-tile-like))::before {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* Button row: [♡] left, [🛒] right — pinned to tile bottom via margin-top:auto above. */
.product-card-meta {
    --st-tile-quick-add-slot: var(--st-tile-action-size);
    --st-tile-like-slot: var(--st-tile-action-size);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 0;
    width: 100%;
}

.product-card-meta:not(:has(.st-tile-quick-add))::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: var(--st-tile-quick-add-slot);
    height: var(--st-tile-quick-add-slot);
    justify-self: end;
    visibility: hidden;
    pointer-events: none;
}

.product-card-meta:not(:has(.st-tile-like))::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: var(--st-tile-like-slot);
    height: var(--st-tile-like-slot);
    justify-self: start;
    visibility: hidden;
    pointer-events: none;
}

/* Tile quick-add — subtle on white; solid when in cart */
.product-card-meta .st-tile-quick-add {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    position: relative;
    z-index: 2;
    flex: 0 0 var(--st-tile-action-size);
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: var(--st-tile-action-size);
    height: var(--st-tile-action-size);
    min-width: var(--st-tile-action-size);
    min-height: var(--st-tile-action-size);
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--st-tile-action-border) !important;
    border-radius: 50% !important;
    background: var(--st-tile-action-bg) !important;
    color: var(--st-tile-action-color) !important;
    font-family: inherit !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 0 !important;
    box-shadow: none;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    touch-action: manipulation;
}

.product-card-meta .st-tile-quick-add:active,
.product-card-meta .st-tile-quick-add:focus,
.product-card-meta .st-tile-quick-add:focus-visible {
    outline: none;
}

.product-card-meta .st-tile-quick-add-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 0;
    pointer-events: none;
}

.product-card-meta .st-tile-quick-add-icon svg,
.product-card-meta .st-tile-quick-add-svg {
    display: block;
    width: var(--st-tile-action-icon);
    height: var(--st-tile-action-icon);
}

.product-card-meta .st-tile-quick-add:hover,
.product-card-meta .st-tile-quick-add:focus-visible {
    background: var(--st-tile-action-bg-hover) !important;
    border-color: var(--st-tile-action-color) !important;
    color: var(--st-tile-action-color-hover) !important;
    outline: none;
}

.product-card-meta .st-tile-quick-add.is-loading {
    opacity: 1;
    cursor: default !important;
    pointer-events: none;
}

.product-card-meta .st-tile-quick-add.is-loading .st-tile-quick-add-icon svg {
    opacity: 0;
    visibility: hidden;
}

.product-card-meta .st-tile-quick-add.is-loading .st-tile-quick-add-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: st-tile-atc-spin 0.7s linear infinite;
}

@keyframes st-tile-atc-spin {
    to {
        transform: rotate(360deg);
    }
}

.product-card-meta .st-tile-quick-add.is-in-cart {
    background: var(--st-tile-action-bg) !important;
    border-color: #d1bc9b !important;
    color: var(--st-tile-action-color) !important;
    cursor: pointer !important;
}

.product-card-meta .st-tile-quick-add.is-in-cart.is-loading {
    pointer-events: none;
    cursor: default !important;
}

.product-card-meta .st-tile-quick-add.is-in-cart .st-tile-quick-add-icon,
.product-card-meta .st-tile-quick-add.is-in-cart .st-tile-quick-add-svg,
.product-card-meta .st-tile-quick-add.is-in-cart .st-tile-quick-add-icon svg {
    color: var(--st-tile-action-color) !important;
}

.product-card-meta .st-tile-quick-add.is-in-cart .st-tile-quick-add-svg--check path {
    stroke: currentColor !important;
    fill: none !important;
}

/* Tile like — same shell as quick-add; only the heart fill changes when liked */
.product-card-meta .st-tile-like {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    position: relative;
    z-index: 2;
    flex: 0 0 var(--st-tile-like-slot, 30px);
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: var(--st-tile-like-slot, 30px);
    height: var(--st-tile-like-slot, 30px);
    min-width: var(--st-tile-like-slot, 30px);
    min-height: var(--st-tile-like-slot, 30px);
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 1px solid var(--st-tile-action-border) !important;
    border-radius: 50% !important;
    background: var(--st-tile-action-bg) !important;
    color: var(--st-tile-action-color) !important;
    font-family: inherit !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    transform: none !important;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    touch-action: manipulation;
}

.product-card-meta .st-tile-like:active,
.product-card-meta .st-tile-like:focus,
.product-card-meta .st-tile-like:focus-visible {
    outline: none;
    transform: none !important;
}

.product-card-meta .st-tile-like-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 0;
    pointer-events: none;
}

.product-card-meta .st-tile-like-icon svg,
.product-card-meta .st-tile-like-svg {
    display: block;
    width: var(--st-tile-action-icon);
    height: var(--st-tile-action-icon);
}

.product-card-meta .st-tile-like .st-tile-like-svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-card-meta .st-tile-like[data-sp-liked="1"] .st-tile-like-svg path {
    fill: currentColor;
    stroke: none;
}

.product-card-meta .st-tile-like:hover,
.product-card-meta .st-tile-like:focus-visible {
    background: var(--st-tile-action-bg-hover) !important;
    border-color: var(--st-tile-action-color) !important;
    color: var(--st-tile-action-color-hover) !important;
    outline: none;
    transform: none !important;
}

.product-card-meta .st-tile-like[data-sp-liked="1"] {
    background: var(--st-tile-action-bg) !important;
    border-color: #d1bc9b !important;
    color: var(--st-tile-action-color) !important;
}

.product-card-meta .st-tile-like[data-sp-liked="1"]:hover,
.product-card-meta .st-tile-like[data-sp-liked="1"]:focus-visible {
    background: var(--st-tile-action-bg-hover) !important;
    border-color: var(--st-tile-action-color) !important;
    color: var(--st-tile-action-color-hover) !important;
}

.product-card-meta .st-tile-like.is-loading,
.product-card-meta .st-tile-like[aria-busy="true"] {
    opacity: 1;
    cursor: default !important;
    pointer-events: none;
}

.product-card-meta .st-tile-like.is-loading .st-tile-like-icon svg,
.product-card-meta .st-tile-like[aria-busy="true"] .st-tile-like-icon svg {
    opacity: 0;
    visibility: hidden;
}

.product-card-meta .st-tile-like.is-loading .st-tile-like-icon::after,
.product-card-meta .st-tile-like[aria-busy="true"] .st-tile-like-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: st-tile-atc-spin 0.7s linear infinite;
}

.product-card-meta .st-tile-like .sp-product-likes__count--sr,
.product-card-meta .st-tile-like .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

@media (min-width: 769px) {
    :root {
        --st-tile-meta-padding: 8px 10px 16px;
    }

    .product-card-meta {
        --st-tile-quick-add-slot: var(--st-tile-action-size-desktop);
        --st-tile-like-slot: var(--st-tile-action-size-desktop);
        min-height: auto;
    }

    .product-card-meta .st-tile-quick-add {
        flex-basis: var(--st-tile-action-size-desktop);
        width: var(--st-tile-action-size-desktop);
        height: var(--st-tile-action-size-desktop);
        min-width: var(--st-tile-action-size-desktop);
        min-height: var(--st-tile-action-size-desktop);
    }

    .product-card-meta .st-tile-quick-add-icon svg,
    .product-card-meta .st-tile-quick-add-svg {
        width: var(--st-tile-action-icon-desktop);
        height: var(--st-tile-action-icon-desktop);
    }

    .product-card-meta .st-tile-like {
        flex-basis: var(--st-tile-action-size-desktop);
        width: var(--st-tile-action-size-desktop);
        height: var(--st-tile-action-size-desktop);
        min-width: var(--st-tile-action-size-desktop);
        min-height: var(--st-tile-action-size-desktop);
    }
}

.product-card-meta .wc-block-grid__product-price:not(.product-card-price--in-meta),
.product-card-meta .wc-block-components-product-price:not(.product-card-price--in-meta) {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.product-card-meta .product-card-price--in-meta.wc-block-grid__product-price,
.product-card-meta .product-card-price--in-meta.wc-block-components-product-price {
    text-align: center !important;
    justify-content: center !important;
}

.product-card.out-of-stock .st-tile-quick-add,
.product-card.st-out-of-stock .st-tile-quick-add,
li.product.out-of-stock .st-tile-quick-add,
li.product.st-out-of-stock .st-tile-quick-add,
.wc-block-grid__product.outofstock .st-tile-quick-add,
.wc-block-grid__product.out-of-stock .st-tile-quick-add,
.wc-block-grid__product.st-out-of-stock .st-tile-quick-add,
li.st-out-of-stock .st-tile-quick-add {
    display: none !important;
}

.product-card-brand {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: capitalize;
}

.product-card-title,
.product-card-title.product-title {
    font-size: var(--st-tile-title-size) !important;
    font-weight: 400 !important;
    font-family: var(--font-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--text-color) !important;
    margin: 0 0 4px !important;
    line-height: 1.35;
    min-height: calc(2 * 1.35 * 0.8rem);
    max-height: calc(2 * 1.35 * 0.8rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-price,
.product-card-price .price,
.product-card-price .price span {
    font-size: var(--st-tile-price-size) !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    margin: 2px 0 0 !important;
    text-decoration: none !important;
}