/* ==========================================================================
   Product page (single-portfolio.php) and the «Finn i butikk» drawer.
   Figma: «Meieri – produktside» desktop 2168:9881, mobile 2168:10371,
   drawer 2176:10380. Cards and rows come from products.css.
   ========================================================================== */

.product-page {
    width: min(100% - 2rem, 67.5rem); /* 1080px */
    margin-inline: auto;
    padding-bottom: 7.5rem;
    color: var(--roros-color-text-primary);
}

.product-page p {
    margin: 0;
}

/* Breadcrumb */

.breadcrumb {
    margin-top: 2rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-caption);
    line-height: var(--roros-line-height-caption);
}

.product-page .breadcrumb li {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 0.5rem;
    color: var(--roros-color-text-muted);
}

.breadcrumb a {
    color: var(--roros-color-text-secondary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb [aria-current] {
    color: var(--roros-color-text-primary);
}

/* Product – gallery left, details right */

.product-layout {
    display: grid;
    grid-template-columns: 37.5rem minmax(0, 1fr); /* 600px */
    gap: 3rem;
    align-items: start;
    margin-top: 5rem;
}

.product__gallery {
    aspect-ratio: 1;
    background: var(--roros-color-bg-page);
}

.product__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product__details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.product-page .product-tag {
    padding: 0.5rem;
    background: var(--roros-color-surface-cream);
    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;
}

/* WooCommerce's sale badge («Tilbud») in the tag's place on shop products – the tag's size, the badge's colour */
.product-page .product__header .shop-badge {
    padding: 0.5rem;
    font-size: var(--roros-font-size-body);
    font-weight: 400;
    line-height: var(--roros-line-height-body);
}

.product-page .product__title {
    margin: 0;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h1);
    line-height: var(--roros-line-height-h1);
    color: var(--roros-color-text-primary);
}

.product__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.product-page .product-action,
.product__actions .simplefavorite-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-ui-body);
    line-height: var(--roros-line-height-ui-body);
    color: var(--roros-color-text-primary);
    cursor: pointer;
}

.product-action svg,
.product__actions .simplefavorite-button svg {
    flex-shrink: 0;
}

.product__designation {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.product__designation img {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
}

.product__designation div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-page .product__designation-title {
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
}

.product-page .product__designation-text,
.product-page .product__store p {
    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-secondary);
}

.product-page .product__lead {
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-lead);
    line-height: var(--roros-line-height-lead);
}

.product__store {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-page .accordion__content p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.product-page .accordion__content p + p {
    margin-top: 0.75em;
}

/* A variant's own description above the product's (shop.js) */
.product-page .accordion__variation:not([hidden]) + * {
    margin-top: 0.75em;
}

.product-page .accordion__content h3 {
    margin: 1rem 0 0.25rem;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body-sm);
    font-weight: 500;
    line-height: var(--roros-line-height-body-sm);
}

.product-page .accordion__content h3:first-child {
    margin-top: 0;
}

.product-page .product__category {
    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);
}

/* «Mer …» and «Inspirasjon fra kjøkkenet» – also the result sections on the search page */

.product-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 5rem;
}

.product-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

:is(.product-page, .search-page) .product-section h2 {
    margin: 0;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h3);
    line-height: var(--roros-line-height-h3);
    color: var(--roros-color-text-primary);
}

:is(.product-page, .search-page) .link-see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-ui-body);
    line-height: var(--roros-line-height-ui-body);
    color: var(--roros-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.link-see-all::after {
    content: "";
    width: 1rem;
    height: 0.875rem;
    background: url("../icon/arrow-right.svg") center / contain no-repeat;
}

:is(.product-page, .search-page) .link-see-all:hover {
    text-decoration: underline;
}

/* Card / Recipe (Figma 2077:76) in a row, or in the search page's grid */

:is(.recipe-row, .recipe-grid) .recipe-post.item {
    flex-direction: column;
    padding-bottom: 1.5rem;
    background: var(--roros-color-surface-blue);
}

.recipe-row .recipe-post.item {
    width: 15.9375rem; /* 255px */
}

:is(.recipe-row, .recipe-grid) .recipe-post.item img {
    width: 100%;
}

:is(.recipe-row, .recipe-grid) .recipe-post.item .content {
    padding: 0.5rem 0.5rem 0;
}

:is(.product-page .recipe-row, .search-page .recipe-grid) .recipe-title {
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h4);
    line-height: var(--roros-line-height-h4);
}

/* «Finn i butikk» drawer – slides in from the right */

html.drawer-open {
    overflow: hidden;
}

.store-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(30rem, 100%); /* 480px */
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--roros-color-bg-page);
    color: var(--roros-color-text-primary);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.store-drawer[open] {
    animation: store-drawer-in 0.25s ease-out;
}

.store-drawer::backdrop {
    background: var(--roros-color-bg-image-overlay);
}

@keyframes store-drawer-in {
    from {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .store-drawer[open] {
        animation: none;
    }
}

.store-drawer__inner {
    min-height: 100%;
    padding: 2rem 1.5rem 1.5rem;
}

.store-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.store-drawer__header h2 {
    margin: 0;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h3);
    line-height: var(--roros-line-height-h3);
}

.store-drawer__close {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.store-drawer__close svg {
    display: block;
}
/* Mobile – 959px matches the header's mobile/desktop switch */

@media (max-width: 959px) {
    .product-page {
        padding-bottom: 4rem;
    }

    .breadcrumb {
        margin-top: 1rem;
    }

    .product-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        margin-top: 2rem;
    }

    .product-section {
        gap: 1rem;
        margin-top: 2rem;
    }

    /* «Alle …» moves below the row */
    .product-section__header {
        display: contents;
    }

    :is(.product-page, .search-page) .link-see-all {
        order: 1;
        align-self: flex-start;
    }

    /* Rows run to the screen edges */
    .product-section .product-row {
        margin-inline: -1rem;
        padding-inline: 1rem;
        scroll-padding-inline: 1rem;
    }

    .recipe-row .recipe-post.item {
        width: 16.1875rem; /* 259px */
    }

    .store-drawer__inner {
        padding: 1rem;
    }
}