/* ==========================================================================
   Nettbutikk – shared shop components.
   Figma: «Nettbutikk» 2183:11456 (overview), 2183:11458 / 11460 / 11462 (product pages).
   ========================================================================== */

/* Price (Figma «Priser»: Price/Default + Price/Old) – WooCommerce's get_price_html(): on sale
   <del> old, <ins> current; the old price is shown last. A variation's price comes in
   WooCommerce's .price span (shop.js), flattened here so the order applies. */

.shop-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    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);
    white-space: nowrap;
}

.shop-price .price {
    display: contents;
}

.shop-price ins {
    order: -1;
    background: none;
    font: inherit;
    text-decoration: none;
}

.shop-price del {
    order: 1;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body-sm);
    line-height: var(--roros-line-height-body-sm);
    color: var(--roros-color-text-price-old);
    text-decoration: line-through;
}

/* Badge (Figma 2107:161) – Sale is yellow, Info is cream */

.shop-badge {
    padding: 0.25rem 0.5rem;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-caption);
    font-weight: 500;
    line-height: var(--roros-line-height-caption);
    color: var(--roros-color-text-primary);
    white-space: nowrap;
}

.shop-badge--sale {
    background: var(--roros-color-surface-accent);
}

.shop-badge--info {
    background: var(--roros-color-surface-cream);
}

/* On a card it sits on the image */
.shop-card__media .shop-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
}

/* Round add-to-cart button (Figma «Legg i korja (rund)») – 36px, tick once added */

.shop-round-button {
    position: relative;
    z-index: 1; /* above the card's stretched title link */
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--roros-color-action-primary);
    transition: background-color 0.15s;
}

.shop-round-button:hover {
    background: var(--roros-color-action-primary-hover);
}

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

.shop-round-button svg {
    flex-shrink: 0;
}

.shop-round-button.loading {
    opacity: 0.5;
    pointer-events: none;
}

.shop-round-button__added {
    position: absolute;
    inset: 0;
    display: none;
}

.shop-round-button.added .shop-round-button__added {
    display: block;
}

/* WooCommerce adds a «Vis handlekurv» link after the button – the tick says it instead */
.shop-card a.added_to_cart,
.shop-addon a.added_to_cart,
.shop-add-to-cart a.added_to_cart {
    display: none;
}

/* Colour swatch – small on cards (Figma 2107:154), large on the product page (2149:405) */

.shop-swatch {
    --swatch-size: 2.75rem; /* 44px */
    --swatch-colour-size: 2rem; /* 32px */
    --swatch-ring: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--swatch-size);
    height: var(--swatch-size);
    border-radius: 999px;
}

.shop-swatch--small {
    --swatch-size: 1.5rem; /* 24px */
    --swatch-colour-size: 1rem; /* 16px */
    --swatch-ring: 1.5px;
}

.shop-swatch.is-selected,
.shop-swatch--filter:has(input:checked) {
    box-shadow: inset 0 0 0 var(--swatch-ring) var(--roros-color-border-strong);
}

.shop-swatch__colour {
    display: block;
    width: var(--swatch-colour-size);
    height: var(--swatch-colour-size);
    border-radius: 999px;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Sold out: dimmed with a stroke – still selectable, so you can see the colour exists */
.shop-swatch.is-sold-out .shop-swatch__colour {
    opacity: 0.4;
}

.shop-swatch.is-sold-out::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--swatch-colour-size) * 1.414);
    height: 1.5px;
    border-radius: 1px;
    background: var(--roros-color-border-strong);
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Size option (Figma 2152:404) – min 56×48, Selected is black, Sold out is dashed */

.shop-size {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    height: 3rem;
    padding-inline: 1rem;
    border: 1px solid var(--roros-color-border-strong);
    background: var(--roros-color-bg-page);
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-size.is-selected {
    background: var(--roros-color-action-primary);
    color: var(--roros-color-text-inverse);
}

.shop-size.is-sold-out {
    border-style: dashed;
    border-color: var(--roros-color-text-muted);
    color: var(--roros-color-text-muted);
}

/* Stock status (Figma 2088:153) – woocommerce/single-product/stock.php */

.shop-stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    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);
}

.shop-stock::before {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--roros-color-status-success);
}

.shop-stock--out-of-stock::before {
    background: var(--roros-color-text-muted);
}

/* Quantity stepper, Round (Figma 2098:156) */

.shop-quantity {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}

.shop-quantity__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--roros-color-border-strong);
    border-radius: 999px;
    background: none;
    cursor: pointer;
}

.shop-quantity__button:disabled {
    opacity: 0.25;
    cursor: default;
}

.shop-quantity .shop-quantity__input {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--roros-color-bg-page);
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.shop-quantity__input::-webkit-inner-spin-button,
.shop-quantity__input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* «Trygg betaling med» + Payment methods (Figma 2159:428) */

.shop-payment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.shop-payment__label {
    margin: 0;
    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);
}

.shop-payment__logos {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-payment__logos img {
    display: block;
    width: auto;
    height: 1.375rem; /* 22px */
}

/* Add-on product (Figma 2194:12155) */

.shop-addon {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--roros-color-surface-cream);
    container-type: inline-size;
}

.shop-addon .shop-addon__message {
    margin: 0;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body-sm);
    line-height: var(--roros-line-height-body-sm);
    color: var(--roros-color-text-primary);
}

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

.shop-addon__image {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--roros-color-bg-page);
}

.shop-addon__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-addon__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.shop-addon .shop-addon__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);
    color: var(--roros-color-text-primary);
    text-decoration: none;
}

.shop-addon .shop-addon__title:hover {
    text-decoration: underline;
}

/* Narrow box (e.g. the desktop summary column): image and button on top, title and price below at full width */
@container (max-width: 20rem) {
    .shop-addon__product {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "image . button"
            "text text text";
    }

    .shop-addon__image {
        grid-area: image;
    }

    .shop-addon__text {
        grid-area: text;
    }

    .shop-addon__product > .shop-round-button {
        grid-area: button;
    }
}

/* Card / Shop product (Figma 2090:585). Vertical card on desktop, List size on mobile. */

.shop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding-bottom: 1rem;
    border: 3px solid var(--roros-color-surface-blue);
    background: var(--roros-color-surface-blue);
    color: var(--roros-color-text-primary);
}

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

.shop-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-card.is-sold-out .shop-card__image {
    opacity: 0.55;
}

.shop-card__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 0;
    padding-inline: 0.5rem;
}

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

.shop-card .shop-card__title {
    margin: 0;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h4);
    font-weight: normal;
    line-height: var(--roros-line-height-h4);
    color: var(--roros-color-text-primary);
}

.shop-card .shop-card__title a {
    color: inherit;
    text-decoration: none;
}

/* The title link covers the whole card */
.shop-card__title a::after {
    content: "";
    position: absolute;
    inset: -3px;
}

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

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

.shop-card__title a:focus-visible {
    outline: none;
}

.shop-card__swatches {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-card__more {
    padding-left: 2px;
    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);
}

.shop-card__more--mobile {
    display: none;
}

.shop-card__buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.shop-card__sold-out {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    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);
}

.shop-card__sold-out .shop-round-button {
    opacity: 0.25;
}

/* Card grid – related products on the product page (4 across), the overview (3 across) */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-grid > li {
    margin: 0;
}

/* Product page (woocommerce/single-product.php). Layout, header, accordion and rows
   come from product-single.css; these are the shop's own parts. */

/* Gallery – 600px image, four 138px thumbnails 16px apart */

.shop-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-gallery__main {
    position: relative; /* for the badge */
    aspect-ratio: 1;
    overflow: hidden; /* keeps tall images from stretching the square */
    background: var(--roros-color-bg-page);
}

.shop-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-gallery__thumbnails {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-gallery__thumbnails li {
    margin: 0;
}

.shop-gallery__thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    background: var(--roros-color-bg-page);
    cursor: pointer;
    overflow: hidden;
}

.shop-gallery__thumbnail.is-selected {
    border-color: var(--roros-color-border-strong);
}

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

.shop-gallery__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Price – Heading/H3 here, with the stock line 8px below */

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

.shop-product__price .shop-price {
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h3);
    line-height: var(--roros-line-height-h3);
}

.shop-product__price .shop-price del {
    font-size: var(--roros-font-size-body);
    line-height: var(--roros-line-height-body);
}

/* The short description is HTML; globals.css sets Belwe on every p */
.product-page .product__lead p {
    font: inherit;
}

/* «Legg i korja» – stepper and a button filling the rest; the button drops to its own
   full-width line when its label and padding no longer fit next to the stepper */

.shop-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* .button-primary comes from globals.css; here it fills the row next to the stepper.
   btn-custom-typo opts it out of Uncode's submit button typography, but Uncode's
   button[type="submit"]:not([class*="fontsize-"]) still sets 14px – hence button. */
.shop-add-to-cart button.shop-add-to-cart__button {
    flex: 1 0 auto;
    width: auto;
    white-space: nowrap;
    font-size: var(--roros-font-size-button);
    min-width: fit-content;
}

.shop-add-to-cart__label--mobile {
    display: none;
}

/* Variant picker (woocommerce/single-product/add-to-cart/variable.php) – «Farge: Grønn» / «Størrelse: Medium»,
   the options 8px apart and a note under them. 24px down to «Legg i korja». */

.shop-variations-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* WooCommerce slides this open with an inline style; price and stock are shown above instead */
.shop-variations-form .single_variation {
    display: none !important;
}

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

.shop-variant {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.product-page .shop-variant__label {
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-variant__value {
    font-weight: 400;
}

.shop-variant__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-variant__options button {
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.shop-variant__options .shop-swatch {
    border: 0;
    background: none;
}

.shop-variant__options .shop-size {
    padding-inline: 1rem;
}

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

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

.product-page .shop-variant__note strong {
    font-weight: 500;
    color: var(--roros-color-text-secondary);
}

/* WooCommerce's selects do the work; shown only when JavaScript is off */
.shop-variant__select {
    display: none;
}

.woocommerce-no-js .shop-variant__select {
    display: block;
}

.woocommerce-no-js .shop-variant__options {
    display: none;
}

/* «Handle trygt» (Figma 2100:939) */

.shop-trust {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1rem;
    background: var(--roros-color-surface-blue);
}

.shop-trust--plain {
    padding: 0.5rem 0 0;
    background: none;
}

.shop-trust .shop-trust__heading {
    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);
    text-align: center;
}

.shop-trust__items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
}

.shop-trust__item svg {
    flex-shrink: 0;
}

.shop-trust__item > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.shop-trust .shop-trust__title {
    margin: 0;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-trust .shop-trust__text {
    font-weight: 400;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body-sm);
    line-height: var(--roros-line-height-body-sm);
    color: var(--roros-color-text-secondary);
    overflow-wrap: anywhere;
}

/* The text is from an editor field: paragraphs and links */
.shop-trust .shop-trust__text p {
    margin: 0;
    font: inherit; /* Uncode sets 600 on form p – the checkout has it inside its form */
    color: inherit;
}

.shop-trust .shop-trust__text p + p {
    margin-top: 0.5em;
}

.shop-trust .shop-trust__text a:not([href^="mailto:"], [href^="tel:"]) {
    color: var(--roros-color-text-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.shop-trust .shop-trust__text a:not([href^="mailto:"], [href^="tel:"]):hover {
    text-decoration: none;
}

/* E-mail and phone read as text, underlined on hover and keyboard focus */
.shop-trust .shop-trust__text a:is([href^="mailto:"], [href^="tel:"]) {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.15em;
}

.shop-trust .shop-trust__text a:is([href^="mailto:"], [href^="tel:"]):is(:hover, :focus-visible) {
    text-decoration: underline;
}

.shop-product .product-section--related {
    margin-top: 5rem;
}

/* ==========================================================================
   Shop page (woocommerce/archive-product.php) – Figma «Nettbutikk – oversikt».
   Hero and category chips come from products.css (.products-overview).
   ========================================================================== */

.shop-archive__top {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: min(100% - 2rem, 67.5rem);
    margin: 1.5rem auto 0;
}

.shop-archive__body {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr); /* 224px sidebar */
    gap: 2rem;
    align-items: start;
    width: min(100% - 2rem, 67.5rem);
    margin: 3rem auto 0;
    padding-bottom: 7.5rem;
}

/* Filters (Figma «Filter» 2111:3371) */

/* A <dialog>, open inline as the sidebar – without the browser's dialog styles */
.shop-filters {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
}

.shop-filters__actions,
.shop-filters .shop-filter--categories,
.shop-filters__close {
    display: none;
}

/* «Filtrer» stays for screen readers – the heading the filter groups sit under */
.shop-filters__top {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.shop-filters__groups {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.shop-filter {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-filter__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    cursor: pointer;
}

.shop-filter__summary::-webkit-details-marker {
    display: none;
}

.shop-filter__chevron {
    display: flex;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.shop-filter:not([open]) .shop-filter__chevron {
    transform: rotate(180deg);
}

.shop-archive .shop-filter__heading {
    margin: 0;
    font-family: var(--roros-font-family-display);
    font-size: var(--roros-font-size-h3);
    font-weight: normal;
    line-height: var(--roros-line-height-h3);
    color: var(--roros-color-text-primary);
}

.shop-archive .shop-filter__options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-inline: 0.5rem;
}

.shop-archive .shop-filter--colours .shop-filter__options {
    flex-direction: row;
    flex-wrap: wrap;
}

.shop-archive .shop-filter--checkboxes .shop-filter__options {
    gap: 0.75rem;
}

/* Filter option (Figma 2072:29) – cream, yellow when selected */

.shop-filter-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem;
    background: var(--roros-color-surface-cream);
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body);
    font-weight: 400;
    line-height: var(--roros-line-height-body);
    color: var(--roros-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.shop-filter-option.is-selected,
.shop-filter-option:has(input:checked) {
    background: var(--roros-color-surface-accent);
}

.shop-filter-option:has(input:focus-visible),
.shop-swatch--filter:has(input:focus-visible),
.shop-checkbox:has(input:focus-visible) {
    outline: 2px solid var(--roros-color-border-strong);
    outline-offset: 2px;
}

/* The checkbox inside a price option or colour swatch – hidden, the option shows its state
   and focus. Not .screen-reader-text: WordPress and Uncode show that on focus (skip links). */
.shop-filters input.shop-filter-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.shop-swatch--filter {
    cursor: pointer;
}

/* Checkbox / Labeled (Figma 2073:253) */

.shop-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body-sm);
    font-weight: 400;
    line-height: var(--roros-line-height-body-sm);
    color: var(--roros-color-text-primary);
    cursor: pointer;
}

.shop-checkbox .shop-checkbox__input {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--roros-color-border-strong);
    border-radius: 0;
    background: var(--roros-color-surface-blue) center / 1.5rem no-repeat;
    appearance: none;
    cursor: pointer;
}

.shop-checkbox .shop-checkbox__input:checked {
    background-image: url("../icon/check.svg");
}

/* Uncode draws its own tick on checked checkboxes (an icon font in ::before) */
.shop-checkbox .shop-checkbox__input:checked::before {
    content: none;
}

.shop-checkbox__input:focus-visible {
    outline: none;
}

/* Without JavaScript the filters apply with a button */
.shop-filters__submit {
    align-self: flex-start;
}

.woocommerce-js .shop-filters__submit {
    display: none;
}

/* Search and sort (Figma «Søk og sortering» 2111:3408) */

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.shop-search {
    display: flex;
    align-items: center;
    width: 26.25rem; /* 420px */
    height: 3.375rem; /* 54px */
    padding-inline: 1rem;
    border-bottom: 2px solid var(--roros-color-border-strong);
}

.shop-archive .shop-search__input {
    flex: 1;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border: 0;
    background: none;
    box-shadow: none;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-archive .shop-search__input::placeholder {
    color: var(--roros-color-text-primary);
    opacity: 1;
}

.shop-search__input:focus {
    outline: none;
}

.shop-search:has(.shop-search__input:focus-visible) {
    outline: 2px solid var(--roros-color-border-strong);
    outline-offset: 2px;
}

.shop-search__button {
    display: flex;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.shop-toolbar__row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.shop-filter-button {
    display: none;
}

/* Select (Figma 2073:241) */

.shop-sort {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 17.5rem; /* 280px */
    padding: 1rem;
    border: 1px solid var(--roros-color-border-strong);
    background: var(--roros-color-bg-page);
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-sort:has(select:focus-visible) {
    outline: 2px solid var(--roros-color-border-strong);
    outline-offset: 2px;
}

.shop-archive .shop-sort__label {
    margin: 0;
    font: inherit;
    white-space: nowrap;
}

.shop-archive .shop-sort__select {
    flex: 1;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 1.25rem 0 0;
    border: 0;
    background: url("../icon/chevron-down.svg") right center / 1rem no-repeat;
    font: inherit;
    color: inherit;
    appearance: none;
    cursor: pointer;
}

.shop-sort__select:focus {
    outline: none;
}

/* Results */

.shop-archive__products {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

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

.shop-results.is-loading {
    opacity: 0.5;
    transition: opacity 0.2s 0.1s;
}

/* Uncode sets margin and weight 600 on form p */
.shop-archive .shop-results__count,
.shop-archive .shop-results__empty {
    margin: 0;
    font-family: var(--roros-font-family-ui);
    font-weight: 400;
    font-size: var(--roros-font-size-caption);
    line-height: var(--roros-line-height-caption);
    color: var(--roros-color-text-muted);
}

.shop-archive .shop-results__empty {
    font-size: var(--roros-font-size-body);
    line-height: var(--roros-line-height-body);
}

.shop-archive .shop-results__empty a {
    color: var(--roros-color-text-primary);
}

.shop-grid--archive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.shop-results nav.pagination {
    margin: 0;
    padding-top: 1.5rem;
}

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

@media (max-width: 959px) {
    /* List size – not for .shop-card--vertical (the search page's mixed grid) */
    .shop-card:not(.shop-card--vertical) {
        flex-direction: row;
        gap: 0.5rem;
        height: 10.6875rem; /* 171px */
        padding-bottom: 0;
    }

    .shop-card:not(.shop-card--vertical) .shop-card__media {
        width: 10.3125rem; /* 165px */
        height: 100%;
    }

    .shop-card:not(.shop-card--vertical) .shop-card__info {
        min-width: 0;
        padding: 0.5rem;
    }

    .shop-card .shop-card__title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 1.25rem; /* Figma keeps 20px on the List card */
    }

    .shop-card__swatches .shop-swatch:nth-child(5) {
        display: none;
    }

    .shop-card__more--mobile {
        display: inline;
    }

    .shop-card__more--desktop {
        display: none;
    }

    .shop-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .shop-gallery {
        gap: 0.5rem;
    }

    .shop-gallery__thumbnails {
        gap: 0.5rem;
    }

    .shop-add-to-cart {
        gap: 0.75rem;
    }

    .shop-add-to-cart__label--desktop {
        display: none;
    }

    .shop-add-to-cart__label--mobile {
        display: inline;
    }

    .shop-product .product-section--related {
        margin-top: 2rem;
    }

    /* Shop page */

    .shop-archive__top {
        gap: 1.5rem;
        width: 100%;
        margin-top: 0;
    }

    .shop-archive__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        margin-top: 1.5rem;
        padding-bottom: 4rem;
    }

    .shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .shop-search {
        width: 100%;
    }

    .woocommerce-js .shop-filter-button {
        display: block;
        flex: 1;
        margin: 0;
        padding: 0.75rem 1rem;
        border: 0;
        background: var(--roros-color-action-secondary);
        font-family: var(--roros-font-family-ui);
        font-size: var(--roros-font-size-button);
        font-weight: 500;
        line-height: var(--roros-line-height-button);
        color: var(--roros-color-text-primary);
        cursor: pointer;
    }

    .shop-sort {
        flex: 1;
        width: auto;
    }

    .shop-archive .shop-sort__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .shop-grid--archive {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    /* Filter panel (Figma 2111:3531) – full screen, opened by «Filter» */

    .shop-filters:modal {
        position: fixed;
        inset: 0;
        display: flex;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0.5rem 1rem 7.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--roros-color-bg-page);
    }

    .shop-filters:modal .shop-filters__top {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .shop-archive .shop-filters__title {
        margin: 0;
        font-family: var(--roros-font-family-display);
        font-size: var(--roros-font-size-h2);
        font-weight: normal;
        line-height: var(--roros-line-height-h2);
        color: var(--roros-color-text-primary);
    }

    .shop-filters:modal .shop-filters__close {
        display: flex;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .shop-filters__groups {
        gap: 1.5rem;
    }

    .shop-filters:modal .shop-filter--categories {
        display: flex;
    }

    .shop-filter {
        gap: 0.75rem;
    }

    /* Not collapsible in the panel */
    .shop-filter__summary {
        pointer-events: none;
    }

    .shop-filter__chevron {
        display: none;
    }

    .shop-archive .shop-filter__options {
        flex-direction: row;
        flex-wrap: wrap;
        padding-inline: 0;
    }

    .shop-archive .shop-filter--checkboxes .shop-filter__options {
        flex-direction: column;
    }

    .shop-filters:modal .shop-filters__actions {
        position: fixed;
        inset: auto 0 0;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1rem 1.5rem;
        border-top: 1px solid var(--roros-color-border-strong);
        background: var(--roros-color-bg-page);
    }

    .shop-archive .shop-filters__reset {
        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: underline;
    }

    .shop-filters__apply {
        flex: 1;
    }
}

html.shop-filters-open {
    overflow: hidden;
}