/* ==========================================================================
   Product overview (template-produkter.php) and Card / Dairy product.
   Figma: «Meieri – oversikt» desktop 2178:10747, mobile 2178:11288.
   ========================================================================== */

.products-overview {
    --products-content-width: 67.5rem; /* 1080px */
    --products-gutter: max(1rem, calc((100% - var(--products-content-width)) / 2));
    --products-header-offset: 7.5rem; /* clears the sticky header when jumping to a category */
    background: var(--roros-color-bg-page);
    color: var(--roros-color-text-primary);
}

.products-overview ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hero, intro and category chips */

.products-top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: min(100% - 2rem, var(--products-content-width));
    margin-inline: auto;
}

.products-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12.5rem; /* 200px */
    overflow: hidden;
    background: var(--roros-color-surface-blue);
}

.products-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--roros-color-bg-image-overlay);
}

.products-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.products-overview .products-hero__title {
    position: relative;
    z-index: 1;
    margin: 0;
    padding-inline: 1rem;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-display);
    line-height: var(--roros-line-height-display);
    color: var(--roros-color-text-inverse);
    text-align: center;
}

.products-overview .products-intro {
    max-width: 47.5rem; /* 760px */
    margin: 0;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-lead);
    line-height: var(--roros-line-height-lead);
}

.products-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

:is(.products-overview, .search-page) .chip {
    display: block;
    padding: calc(0.5rem - 1px); /* Figma's border sits inside the 8px padding */
    border: 1px solid var(--roros-color-border-subtle);
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body);
    line-height: var(--roros-line-height-body);
    color: var(--roros-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

:is(.products-overview, .search-page) .chip:hover {
    background: var(--roros-color-surface-cream);
}

/* Selected (Figma Chip, State=Selected) – the shop's current category, the search page's group */
:is(.products-overview, .search-page) .chip[aria-current] {
    border-color: var(--roros-color-surface-accent);
    background: var(--roros-color-surface-accent);
}

/* Category sections – full viewport width, out of Uncode's boxed .limit-width container,
   so the rows can run off the right edge. */

.page-template-template-produkter .box-wrapper {
    overflow-x: clip;
}

.products-categories {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-block: 4rem 7.5rem;
}

.product-category {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-margin-top: var(--products-header-offset);
}

.product-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: var(--products-gutter);
}

.product-category__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0.75rem;
}

.products-overview .product-category__title h2 {
    margin: 0;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h2);
    line-height: var(--roros-line-height-h2);
    color: var(--roros-color-text-primary);
}

.product-category__count {
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-caption);
    line-height: var(--roros-line-height-caption);
    color: var(--roros-color-text-muted);
    white-space: nowrap;
}

/* Prev/next – shown by product-rows.js only when the row overflows */

.product-row-nav {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.product-row-nav[hidden] {
    display: none;
}

.product-row-nav__button {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--roros-color-icon-primary);
    cursor: pointer;
}

.product-row-nav__button svg {
    display: block;
}

.product-row-nav__button:disabled {
    opacity: 0.2;
    cursor: default;
}

/* Horizontal row of cards – also used on the product page */

.product-row {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.product-row::-webkit-scrollbar {
    display: none;
}

.product-row > li {
    display: flex; /* cards in a row share the tallest card's height */
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* On the overview the row starts in line with the content and runs off the right edge */
.products-overview .product-row {
    padding-inline: var(--products-gutter);
    scroll-padding-inline: var(--products-gutter);
}

/* Card / Dairy product (Figma 2166:632). Default 255px, compact 171px on mobile. */

.product-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 15.9375rem; /* 255px */
    min-height: 20.6875rem; /* 331px */
    padding-bottom: 1rem;
    border: 3px solid var(--roros-color-surface-blue);
    background: var(--roros-color-surface-blue);
    color: var(--roros-color-text-primary);
    text-decoration: none;
}

.product-card:focus-visible {
    outline: 2px solid var(--roros-color-border-strong);
    outline-offset: 2px;
}

.product-card__media {
    position: relative;
    height: 15.9375rem; /* 255px */
    overflow: hidden;
    background: var(--roros-color-bg-page);
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--roros-color-surface-cream);
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-caption);
    font-weight: 500;
    line-height: var(--roros-line-height-caption);
    white-space: nowrap;
}

.product-card .product-card__title {
    margin: 0;
    padding-inline: 0.5rem;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h4);
    line-height: var(--roros-line-height-h4);
    color: var(--roros-color-text-primary);
}

.product-card:hover .product-card__title {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Mobile – 959px matches the header's mobile/desktop switch */

@media (max-width: 959px) {
    .products-overview {
        --products-header-offset: 5rem;
    }

    .products-top {
        gap: 1.5rem;
        width: 100%;
    }

    .products-hero {
        height: 13.5rem; /* 216px */
    }

    .products-overview .products-hero__title {
        font-size: var(--roros-font-size-h2);
        line-height: var(--roros-line-height-h2);
    }

    .products-overview .products-intro {
        margin-top: 0;
        padding-inline: 1rem;
    }

    .products-jump ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-inline: 1rem;
        scrollbar-width: none;
    }

    .products-jump ul::-webkit-scrollbar {
        display: none;
    }

    .products-jump li {
        flex-shrink: 0;
    }

    .products-categories {
        gap: 3rem;
        padding-block: 3rem 4rem;
    }

    .product-category {
        gap: 1rem;
    }

    .product-category__title {
        column-gap: 0.5rem;
    }

    .product-row-nav,
    .product-row-nav[hidden] {
        display: none;
    }

    .product-row {
        gap: 0.5rem;
    }

    .product-card {
        width: 10.6875rem; /* 171px */
        min-height: 16.3125rem; /* 261px */
    }

    .product-card__media {
        height: 10.3125rem; /* 165px */
    }
}