/* ==========================================================================
   Shop module — catalogue listings
   --------------------------------------------------------------------------
   The category page's toolbar and three views (grid, list, table), the
   extras on product cards (stickers, second photo, rating, key specs, the
   variant chips, «в избранное» / «сравнить», quick view), «Показать ещё»,
   the quick-view dialog, «Избранное», «Сравнение» and «Вы смотрели».

   Linked from the `head` hook after the module's storefront.css, so a rule
   here wins over one there of the same weight. Every colour is a theme
   token; the stickers' colours are variables a theme or the settings
   override:

     --shop-sticker-{discount|hit|new|few}-bg / -fg   automatic stickers
     --sticker-bg / --sticker-fg                     set per sticker inline
   ========================================================================== */

:root {
    --shop-sticker-discount-bg: var(--c-danger);
    --shop-sticker-discount-fg: #fff;
    --shop-sticker-hit-bg: var(--c-mark);
    --shop-sticker-hit-fg: var(--c-mark-text, #12151c);
    --shop-sticker-new-bg: var(--c-success);
    --shop-sticker-new-fg: #fff;
    --shop-sticker-few-bg: var(--c-slab, #12151c);
    --shop-sticker-few-fg: var(--c-slab-text, #fff);
    --shop-star: var(--c-mark);
}

/* --- header: wishlist and compare ----------------------------------------------- */

.shop-hlink {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-strong);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.shop-hlink:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.shop-hlink .cms-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.shop-hlink__count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-accent-contrast);
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.shop-hlink__count[hidden] {
    display: none;
}

@media (max-width: 30rem) {
    .shop-hlink {
        width: 40px;
        height: 40px;
    }
}

/* --- category page: side column, picture, text ----------------------------------- */

/* The filter panel lives in the side column; on a phone the column shows
   for it (the category tree stays a wide-screen thing). */
@media (max-width: 63.99rem) {
    .shop-side--filter {
        display: block;
    }

    .shop-side--filter .shop-tree {
        display: none;
    }
}

.shop-side--filter .shop-tree + * {
    margin-block-start: var(--s-5);
}

.shop-head--image {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4) var(--s-5);
    max-width: none;
}

.shop-head__text {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    max-width: 52rem;
}

.shop-head__image {
    width: 5.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--c-surface-sunk);
}

@media (min-width: 40rem) {
    .shop-head__image {
        width: 7.5rem;
    }
}

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

.shop-catimg {
    margin: 0 0 var(--s-7);
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-surface-sunk);
}

.shop-catimg__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
}

.shop-cattext {
    max-width: 52rem;
    margin-block: var(--s-7) 0;
    color: var(--c-text-muted);
}

.shop-products + .shop-banner,
.shop-products + .shop-catimg,
.shop-cattext + .shop-banner,
.shop-cattext + .shop-catimg {
    margin-block: var(--s-7) 0;
}

/* --- toolbar ----------------------------------------------------------------------- */

.shop-toolbar .shop-sort {
    flex-wrap: wrap;
    row-gap: var(--s-2);
}

.shop-page .shop-sort__select--limit {
    padding-inline-end: 2rem;
}

.shop-sort__select + .shop-sort__label {
    margin-inline-start: var(--s-2);
}

.shop-toolbar__end {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-inline-start: auto;
}

.shop-views {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-surface);
}

.shop-views__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 34px;
    border-radius: calc(var(--r-sm) - 2px);
    color: var(--c-text-muted);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.shop-views__btn .cms-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.shop-views__btn:hover {
    color: var(--c-text-strong);
    background: var(--c-surface-sunk);
}

.shop-views__btn[aria-current] {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.shop-toolbar__print {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-2);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-muted);
    text-decoration: none;
}

.shop-toolbar__print:hover {
    color: var(--c-link);
}

@media (max-width: 39.99rem) {
    .shop-toolbar {
        gap: var(--s-3);
    }

    .shop-toolbar__count {
        flex: 1 1 100%;
    }

    .shop-toolbar__print span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .shop-toolbar .shop-sort__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* --- grid: columns from the settings ------------------------------------------- */

@media (max-width: 39.99rem) {
    .shop-grid--m1 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 64rem) {
    .shop-grid--c3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shop-grid--c4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s-4);
    }

    .shop-grid--c5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--s-3);
    }

    /* Next to the side column the page is narrower: one column fewer. */
    .shop-layout .shop-grid--c4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shop-layout .shop-grid--c5 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .shop-layout .shop-grid--c4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .shop-layout .shop-grid--c5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.shop-grid--c5 .shop-card__body {
    padding: var(--s-3);
}

.shop-grid--recent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
    .shop-grid--recent {
        grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    }
}

@media (min-width: 80rem) {
    .shop-grid--recent {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* --- card: second photo, stickers, toggles, quick view ---------------------------- */

.shop-card__img--alt {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s var(--ease), transform 0.6s var(--ease);
}

@media (hover: hover) {
    .shop-card--flip:hover .shop-card__img--alt,
    .shop-card--flip:focus-within .shop-card__img--alt {
        opacity: 1;
    }
}

.shop-stickers {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

@media (min-width: 40rem) {
    .shop-stickers {
        top: var(--s-3);
        left: var(--s-3);
    }
}

.shop-sticker {
    --_bg: var(--c-accent);
    --_fg: var(--c-accent-contrast);
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.28rem 0.55rem;
    border-radius: var(--r-sm);
    background: var(--sticker-bg, var(--_bg));
    color: var(--sticker-fg, var(--_fg));
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-sticker .cms-icon {
    width: 0.95em;
    height: 0.95em;
    stroke-width: 2.4;
}

.shop-sticker--auto.shop-sticker--discount {
    --_bg: var(--shop-sticker-discount-bg);
    --_fg: var(--shop-sticker-discount-fg);
    font-size: 0.75rem;
    letter-spacing: 0;
}

.shop-sticker--auto.shop-sticker--hit {
    --_bg: var(--shop-sticker-hit-bg);
    --_fg: var(--shop-sticker-hit-fg);
}

.shop-sticker--auto.shop-sticker--new {
    --_bg: var(--shop-sticker-new-bg);
    --_fg: var(--shop-sticker-new-fg);
}

.shop-sticker--auto.shop-sticker--few {
    --_bg: var(--shop-sticker-few-bg);
    --_fg: var(--shop-sticker-few-fg);
}

.shop-stickers--lg {
    top: var(--s-4);
    left: var(--s-4);
    gap: 6px;
}

.shop-stickers--lg .shop-sticker {
    padding: 0.35rem 0.75rem;
    font-size: var(--t-xs);
}

.shop-sticker--inline {
    padding: 0.15rem 0.4rem;
    font-size: 0.62rem;
}

/* The old single badge is replaced by the stickers. */
.shop-card .shop-badge {
    display: none;
}

.shop-toggles {
    display: flex;
    gap: var(--s-2);
}

.shop-toggles__form {
    display: contents;
}

.shop-toggles--sm {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    z-index: 2;
    flex-direction: column;
}

@media (min-width: 40rem) {
    .shop-toggles--sm {
        top: var(--s-3);
        right: var(--s-3);
    }
}

.shop-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.shop-toggle .cms-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.shop-toggle:hover {
    color: var(--c-text-strong);
}

.shop-toggle:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 2px;
}

.shop-toggle--wishlist[aria-pressed="true"] {
    color: var(--c-danger);
}

.shop-toggle--wishlist[aria-pressed="true"] .cms-icon {
    fill: currentColor;
}

.shop-toggle--compare[aria-pressed="true"] {
    background: var(--c-accent);
    color: var(--c-accent-contrast);
}

.shop-toggle[aria-busy="true"] {
    opacity: 0.6;
}

/* On a phone the compare button would crowd the photo: the heart stays. */
@media (max-width: 39.99rem) {
    .shop-toggles--sm .shop-toggles__form:nth-child(2) .shop-toggle {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .shop-toggle:active {
        transform: scale(0.9);
    }
}

.shop-toggles--lg .shop-toggle {
    width: auto;
    height: auto;
    min-height: 40px;
    gap: var(--s-2);
    grid-auto-flow: column;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    box-shadow: none;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
}

.shop-toggles--lg .shop-toggle:hover {
    border-color: var(--c-text-muted);
}

.shop-toggles--lg .shop-toggle--compare[aria-pressed="true"] {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.shop-toggles--lg .shop-toggle--wishlist[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
    color: var(--c-danger);
}

.shop-card__quick {
    position: absolute;
    left: 50%;
    bottom: var(--s-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-surface) 94%, transparent);
    box-shadow: var(--shadow-md, 0 2px 8px rgb(0 0 0 / 0.15));
    color: var(--c-text-strong);
    font-size: var(--t-xs);
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.shop-card__quick[hidden] {
    display: none;
}

.shop-card__quick:hover {
    color: var(--c-link);
}

.shop-card:hover .shop-card__quick,
.shop-card__quick:focus-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.shop-card__quick:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 2px;
}

/* Touch screens have no hover: the photo opens the page, the chips and
   «Выбрать» open the quick view. */
@media (hover: none) {
    .shop-card__quick {
        display: none;
    }
}

/* --- card: rating, SKU, specs, few left ---------------------------------------------- */

.shop-rating {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    font-size: var(--t-xs);
    line-height: 1;
    color: var(--c-text-muted);
}

.shop-rating__stars {
    --pct: calc(var(--rating, 0) / 5 * 100%);
    display: inline-block;
    width: 5.25em;
    height: 1em;
    background: linear-gradient(90deg, var(--shop-star) var(--pct), var(--c-border-strong) var(--pct));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") left center / 1.05em 1em repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") left center / 1.05em 1em repeat-x;
}

.shop-rating__value {
    font-weight: 700;
    color: var(--c-text-strong);
}

.shop-rating__count {
    color: var(--c-text-muted);
    text-decoration: none;
}

.shop-rating--lg {
    font-size: var(--t-sm);
}

.shop-card__sku {
    margin: 0;
    font-size: 0.72rem;
    color: var(--c-text-faint);
}

.shop-card__sku span {
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
}

.shop-card__specs {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: var(--t-xs);
    line-height: 1.35;
}

.shop-card__spec {
    display: flex;
    gap: var(--s-2);
    min-width: 0;
}

.shop-card__spec dt {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--c-text-faint);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-card__spec dt::after {
    content: ":";
}

.shop-card__spec dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--c-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-stock--few {
    color: var(--c-mark-text, var(--c-text-strong));
}

.shop-card__lead {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--c-text-muted);
}

/* --- card: buy button look, variant chips ---------------------------------------------- */

.shop-card__actions {
    flex-direction: column;
    gap: var(--s-2);
}

.shop-card__form--pick {
    flex-direction: column;
    gap: var(--s-2);
}

.shop-card__actions--icon .shop-card__btn {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 44px;
    padding: 0;
}

.shop-card__actions--icon .shop-card__btn .cms-icon {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
}

.shop-pick {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
}

.shop-pick__legend {
    display: block;
    margin: 0 0 var(--s-1);
    padding: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-text-faint);
}

.shop-pick__options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.shop-pick__chip {
    position: relative;
    display: inline-flex;
    text-decoration: none;
}

.shop-pick__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.shop-pick__label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-text-strong);
    pointer-events: none;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.shop-pick__chip:hover .shop-pick__label {
    border-color: var(--c-text-muted);
}

.shop-pick__input:checked + .shop-pick__label {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    box-shadow: inset 0 0 0 1px var(--c-accent);
}

.shop-pick__input:focus-visible + .shop-pick__label,
a.shop-pick__chip:focus-visible .shop-pick__label {
    outline: 2px solid var(--c-link);
    outline-offset: 2px;
}

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

/* Sold out: struck through, not pickable. */
.shop-pick__chip.is-out .shop-pick__label {
    border-style: dashed;
    color: var(--c-text-faint);
    text-decoration: line-through;
}

.shop-pick__input:disabled {
    cursor: not-allowed;
}

.shop-pick__more {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.4rem;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-link);
    text-decoration: none;
}

.shop-pick.is-invalid .shop-pick__legend {
    color: var(--c-danger);
}

.shop-pick.is-invalid .shop-pick__label {
    border-color: var(--c-danger);
}

@media (prefers-reduced-motion: no-preference) {
    .shop-pick.is-invalid {
        animation: shop-nudge 0.4s var(--ease);
    }
}

@keyframes shop-nudge {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* --- list view ------------------------------------------------------------------------- */

.shop-rows {
    display: grid;
    gap: var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-rows__item {
    display: flex;
    min-width: 0;
}

.shop-card--row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
}

.shop-card--row:hover {
    transform: none;
}

.shop-card--row .shop-card__media {
    aspect-ratio: auto;
    min-height: 100%;
}

.shop-card--row .shop-card__media > .shop-card__img:not(.shop-card__img--alt) {
    position: absolute;
    inset: 0;
}

.shop-card--row .shop-toggles--sm {
    top: auto;
    bottom: var(--s-2);
    right: var(--s-2);
    flex-direction: row;
}

.shop-card--row .shop-stickers .shop-sticker:nth-child(n + 3) {
    display: none;
}

.shop-card--row .shop-card__body {
    padding: var(--s-3) var(--s-4);
}

@media (min-width: 40rem) {
    .shop-card--row {
        grid-template-columns: 13rem minmax(0, 1fr);
    }

    .shop-card--row .shop-card__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 15rem;
        grid-auto-rows: min-content;
        column-gap: var(--s-6);
        row-gap: var(--s-2);
        padding: var(--s-5);
    }

    .shop-card--row .shop-card__body > * {
        grid-column: 1;
    }

    .shop-card--row .shop-card__foot {
        grid-column: 2;
        grid-row: 1 / span 8;
        align-self: start;
        margin: 0;
        padding: 0 0 0 var(--s-5);
        border-inline-start: 1px solid var(--c-border);
    }

    .shop-card--row .shop-card__title {
        font-size: var(--t-md);
    }

    .shop-card--row .shop-card__specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--s-5);
    }
}

.shop-card--row .shop-card__form {
    gap: var(--s-2);
}

.shop-card--row .shop-qty--sm .shop-qty__input {
    min-height: 42px;
}

/* --- table view --------------------------------------------------------------------------- */

.shop-table-wrap {
    /* The containing block of the cells' visually-hidden labels: without it
       they escape the scroll box and widen the whole page. */
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
}

.shop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

.shop-table thead th {
    padding: var(--s-3);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-sunk);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.shop-table td,
.shop-table tbody th {
    padding: var(--s-3);
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    vertical-align: middle;
}

.shop-table tbody tr:last-child > * {
    border-bottom: 0;
}

.shop-table__row:hover > * {
    background: color-mix(in srgb, var(--c-surface-sunk) 60%, transparent);
}

.shop-table__photo {
    width: 4.25rem;
    min-width: 4.25rem;
}

.shop-table__img {
    display: block;
    max-width: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--c-surface-sunk);
}

.shop-table__noimg {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--r-sm);
    background: var(--c-surface-sunk);
    color: var(--c-text-faint);
}

.shop-table tbody th.shop-table__name {
    min-width: 12rem;
    font-weight: 400;
}

.shop-table__link {
    font-weight: 650;
    line-height: 1.35;
    color: var(--c-text-strong);
    text-decoration: none;
}

.shop-table__link:hover {
    color: var(--c-link);
    text-decoration: underline;
}

.shop-table__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    margin-top: var(--s-1);
}

.shop-table__sku {
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.shop-table__spec {
    color: var(--c-text);
}

.shop-table td.shop-table__spec {
    max-width: 9rem;
}

/* Long characteristic names («Можно в посудомоечную машину») wrap instead of
   pushing the price and the buy button out of view. */
.shop-table thead th.shop-table__spec {
    min-width: 6rem;
    max-width: 10rem;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

.shop-table__price {
    white-space: nowrap;
}

.shop-table td.shop-table__price .shop-price__was {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4em;
    font-size: 0.72rem;
    white-space: nowrap;
}

.shop-table__buy {
    width: 1%;
    white-space: nowrap;
}

.shop-table__form {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.shop-page .shop-table__qty,
.shop-table__qty {
    width: 3.75rem;
    min-height: 40px;
    padding: 0.3rem 0.4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.shop-table__btn {
    min-height: 40px;
    padding: 0.4rem 0.8rem;
    font-size: var(--t-xs);
}

.shop-table__btn .cms-icon {
    width: 1rem;
    height: 1rem;
}

.shop-table__more {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-link);
}

.shop-table__row.is-out .shop-table__img {
    opacity: 0.6;
}

/* Wide tables scroll sideways; the price and the buy button stay pinned to
   the right edge, so the columns that matter are always in view. */
@media (min-width: 48rem) {
    .shop-table .shop-table__buy {
        position: sticky;
        right: 0;
        width: 13rem;
        min-width: 13rem;
        background: var(--c-surface);
    }

    .shop-table .shop-table__price {
        position: sticky;
        right: 13rem;
        background: var(--c-surface);
        box-shadow: -1px 0 0 var(--c-border);
    }

    .shop-table thead .shop-table__buy,
    .shop-table thead .shop-table__price,
    .shop-table__row:hover > .shop-table__buy,
    .shop-table__row:hover > .shop-table__price {
        background: var(--c-surface-sunk);
    }
}

/* A phone has no room for columns: each row becomes a small card. */
@media (max-width: 47.99rem) {
    .shop-table-wrap {
        overflow: visible;
        border: 0;
        background: none;
    }

    .shop-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .shop-table,
    .shop-table tbody {
        display: grid;
        gap: var(--s-3);
    }

    .shop-table__row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--s-1) var(--s-3);
        padding: var(--s-3);
        border: 1px solid var(--c-border);
        border-radius: var(--r-md);
        background: var(--c-surface);
    }

    .shop-table__row > * {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    .shop-table__row > .shop-table__photo {
        grid-row: 1 / span 6;
        width: auto;
    }

    .shop-table__row > :not(.shop-table__photo) {
        grid-column: 2;
    }

    .shop-table__row > .shop-table__spec,
    .shop-table__row > .shop-table__sku {
        font-size: var(--t-xs);
        color: var(--c-text-muted);
    }

    .shop-table__row > .shop-table__spec::before,
    .shop-table__row > .shop-table__sku::before {
        content: attr(data-label) ": ";
        color: var(--c-text-faint);
    }

    .shop-table__buy {
        width: auto;
        margin-top: var(--s-2) !important;
    }

    .shop-table td.shop-table__spec {
        max-width: none;
    }
}

/* --- «Показать ещё» and the pager ----------------------------------------------------- */

.shop-more {
    display: grid;
    justify-items: center;
    gap: var(--s-5);
    margin-block-start: var(--s-7);
}

.shop-more .cms-pager {
    margin: 0;
}

.shop-more__btn {
    min-width: min(100%, 18rem);
    min-height: 48px;
    gap: var(--s-2);
}

.shop-more__btn[aria-busy="true"] {
    opacity: 0.7;
    pointer-events: none;
}

/* --- quick view dialog ------------------------------------------------------------------- */

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

.shop-modal {
    width: min(100vw - 2 * var(--s-3), 62rem);
    max-width: none;
    max-height: calc(100dvh - 2 * var(--s-3));
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.28);
    overflow: auto;
    overscroll-behavior: contain;
}

.shop-modal::backdrop {
    background: rgb(12 14 20 / 0.55);
}

@media (prefers-reduced-motion: no-preference) {
    .shop-modal[open] {
        animation: shop-modal-in 0.22s var(--ease);
    }
}

@keyframes shop-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

.shop-modal__box {
    position: relative;
    padding: var(--s-5);
}

@media (min-width: 48rem) {
    .shop-modal__box {
        padding: var(--s-7);
    }
}

/* A zero-height bar that sticks to the top of the scrolling dialog: the
   close button stays in reach on a long quick view on a phone. */
.shop-modal__bar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    height: 0;
}

.shop-modal__close {
    display: grid;
    margin: var(--s-3) var(--s-3) 0 0;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--c-surface-sunk);
    color: var(--c-text-strong);
    cursor: pointer;
}

.shop-modal__close:hover {
    background: var(--c-border);
}

.shop-modal__close .cms-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.shop-modal__loading {
    height: 22rem;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--c-surface-sunk), var(--c-surface), var(--c-surface-sunk));
    background-size: 200% 100%;
    animation: shop-shimmer 1.2s linear infinite;
}

@keyframes shop-shimmer {
    to { background-position: -200% 0; }
}

.shop-modal__error {
    margin: var(--s-6) 0 var(--s-4);
}

.shop-qv {
    display: grid;
    gap: var(--s-5);
}

@media (min-width: 48rem) {
    .shop-qv {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--s-7);
        align-items: start;
    }
}

.shop-qv__stage {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--c-surface-sunk);
}

.shop-qv__track {
    margin: 0;
    padding: 0;
    height: 100%;
    list-style: none;
}

.shop-qv__slide {
    height: 100%;
}

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

.shop-qv__empty {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 3rem;
    color: var(--c-text-faint);
}

.shop-qv__thumbs {
    display: flex;
    gap: var(--s-2);
    margin: var(--s-3) 0 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.shop-qv__thumb {
    display: block;
    width: 4rem;
    height: 4rem;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    background: var(--c-surface-sunk);
    cursor: pointer;
}

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

.shop-qv__thumb[aria-current] {
    border-color: var(--c-accent);
}

.shop-qv__info {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
}

.shop-qv__title {
    margin: 0;
    padding-inline-end: var(--s-8);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    color: var(--c-text-strong);
}

.shop-qv .shop-buy {
    padding: var(--s-4);
    box-shadow: none;
}

.shop-qv__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.shop-qv__more {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    font-weight: 650;
    color: var(--c-link);
    text-decoration: none;
}

.shop-qv__more:hover {
    text-decoration: underline;
}

/* --- wishlist and compare pages ---------------------------------------------------------- */

.shop-lists__lead {
    max-width: 44rem;
    margin: calc(-1 * var(--s-3)) 0 var(--s-6);
    color: var(--c-text-muted);
}

.shop-lists__clear {
    display: flex;
    justify-content: center;
    margin-block-start: var(--s-7);
}

.shop-lists__clear .cms-btn {
    gap: var(--s-2);
}

.shop-compare-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    margin-block-end: var(--s-5);
}

.shop-compare-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.shop-compare-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
    text-decoration: none;
}

.shop-compare-tabs__tab[aria-current] {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.shop-compare-tabs__n {
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--c-surface-sunk);
    font-size: 0.72rem;
    text-align: center;
}

.shop-compare-mode {
    display: inline-flex;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
}

.shop-compare-mode__opt {
    padding: 0.4rem 0.8rem;
    border-radius: calc(var(--r-sm) - 2px);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-muted);
    text-decoration: none;
}

.shop-compare-mode__opt[aria-current] {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.shop-compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
}

.shop-compare-wrap:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 2px;
}

.shop-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--t-sm);
}

.shop-compare th,
.shop-compare td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    vertical-align: top;
}

.shop-compare tbody tr:last-child > * {
    border-bottom: 0;
}

.shop-compare tbody th,
.shop-compare__corner {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 11rem;
    min-width: 8.5rem;
    background: var(--c-surface);
    font-weight: 600;
    color: var(--c-text-muted);
}

.shop-compare__product {
    position: relative;
    min-width: 12rem;
    font-weight: 400;
}

.shop-compare__product > * + * {
    margin-top: var(--s-2);
}

.shop-compare__photo {
    display: block;
    aspect-ratio: 1;
    max-width: 10rem;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--c-surface-sunk);
}

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

.shop-compare__title {
    display: block;
    font-weight: 650;
    line-height: 1.35;
    color: var(--c-text-strong);
    text-decoration: none;
}

.shop-compare__title:hover {
    color: var(--c-link);
}

.shop-compare__remove {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    margin: 0 !important;
}

.shop-compare__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c-surface-sunk);
    color: var(--c-text-muted);
    cursor: pointer;
}

.shop-compare__x:hover {
    color: var(--c-danger);
}

.shop-compare__buy {
    width: 100%;
    min-height: 40px;
    font-size: var(--t-xs);
}

.shop-compare tr.is-diff > td {
    background: color-mix(in srgb, var(--c-mark) 12%, var(--c-surface));
    color: var(--c-text-strong);
    font-weight: 600;
}

/* --- «Вы смотрели» ------------------------------------------------------------------------- */

.shop-recent[hidden] {
    display: none;
}

.shop-products-block .shop-recent:not(.shop-related) {
    margin: 0;
}

/* A «Вы смотрели» products block has nothing to show until the visitor
   has looked at something: its whole section (heading included) waits. */
section[data-block-uid]:has(.shop-products-block > .shop-recent[hidden]) {
    display: none;
}