/* ==========================================================================
   Shop module — storefront styles
   --------------------------------------------------------------------------
   The shop's pages (front page, categories, products, cart, checkout, order)
   and its two blocks, plus the header's mini-cart. Linked on every page, so
   every selector is scoped `shop-`. Every colour, radius, size and shadow is
   a theme token: a preset, the dark scheme or a coloured section restyles
   all of it. A sibling of the catalog module's styles, deliberately — a site
   moving from the showcase to the shop keeps its look. Mobile first.

   Reused from the theme as-is: .cms-crumbs, .cms-pager, .cms-seo__*,
   .cms-doc*, .cms-video__*, .cms-btn, .cms-ratio, .cms-prose.
   ========================================================================== */

/* --- header mini-cart ------------------------------------------------------ */

.shop-minicart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill, 999px);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

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

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

.shop-minicart__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-accent-contrast);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

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

.shop-minicart.is-bumped .shop-minicart__count {
    animation: shop-bump 0.4s var(--ease);
}

@keyframes shop-bump {
    40% { transform: scale(1.3); }
}

@media (max-width: 30rem) {
    .shop-minicart__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --- toast («Добавлено в корзину») ----------------------------------------- */

.shop-toast {
    position: fixed;
    inset-inline: var(--s-4);
    bottom: var(--s-4);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: var(--shadow-lift);
    color: var(--c-text-strong);
    font-size: var(--t-sm);
    font-weight: 600;
}

@media (min-width: 40rem) {
    .shop-toast {
        inset-inline: auto var(--s-6);
        bottom: var(--s-6);
    }
}

.shop-toast > .cms-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--c-success);
}

.shop-toast--error > .cms-icon {
    color: var(--c-danger);
}

.shop-toast__text {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-toast__link {
    flex-shrink: 0;
    font-weight: 650;
    color: var(--c-link);
    white-space: nowrap;
}

.shop-toast__close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-inline-end: calc(var(--s-2) * -1);
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--c-text-muted);
}

.shop-toast__close:hover {
    background: var(--c-surface-sunk);
}

@media (prefers-reduced-motion: no-preference) {
    .shop-toast {
        animation: shop-rise 0.22s var(--ease);
    }
}

@keyframes shop-rise {
    from { opacity: 0; transform: translateY(0.75rem); }
}

/* --- page frame ------------------------------------------------------------ */

.shop-page {
    padding-block: var(--s-5) var(--sp-md, var(--s-9));
}

.shop-wrap {
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shop-wrap--narrow {
    max-width: 58rem;
}

.shop-crumbs {
    margin-block-end: var(--s-5);
}

.shop-crumbs .cms-crumbs {
    row-gap: var(--s-1);
}

.shop-layout {
    display: grid;
    gap: var(--s-7);
}

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

.shop-main {
    min-width: 0;
}

.shop-section-title {
    margin-block-end: var(--s-4);
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: var(--fw-heading);
    color: var(--c-text-strong);
}

/* --- category tree (wide screens) ------------------------------------------ */

.shop-side {
    display: none;
}

@media (min-width: 64rem) {
    .shop-side {
        display: block;
        position: sticky;
        top: var(--s-5);
    }
}

.shop-tree {
    padding: var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--card-radius, var(--r-md));
    background: var(--c-surface);
}

.shop-tree__title {
    margin: 0 0 var(--s-2);
    padding: 0 var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

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

.shop-tree__list,
.shop-tree__sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-tree__sub {
    margin: 2px 0 var(--s-2) var(--s-3);
    padding-inline-start: var(--s-3);
    border-inline-start: 1px solid var(--c-border);
}

.shop-tree__link {
    display: block;
    padding: 0.45rem var(--s-2);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-text-strong);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.shop-tree__link--sub {
    font-weight: 450;
    color: var(--c-text-muted);
}

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

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

/* --- page heads ------------------------------------------------------------ */

.shop-head {
    display: grid;
    gap: var(--s-3);
    max-width: 52rem;
    margin-block-end: var(--s-6);
}

.shop-head__title {
    font-size: var(--t-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
}

.shop-head__lead {
    margin: 0;
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--c-text-muted);
    text-wrap: pretty;
}

.shop-head--home {
    margin-block-end: var(--s-7);
}

.shop-head--home .shop-head__title {
    font-size: var(--t-3xl);
}

.shop-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-4);
    max-width: none;
}

.shop-head__count {
    margin: 0;
    font-size: var(--t-md);
    color: var(--c-text-muted);
}

.shop-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    margin: 0;
    color: var(--c-text-muted);
}

/* --- banner, subcategories -------------------------------------------------- */

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

.shop-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

.shop-subs {
    margin-block-end: var(--s-7);
}

.shop-subs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .shop-subs__list {
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        gap: var(--s-4);
    }
}

.shop-subs__list > li {
    display: flex;
    min-width: 0;
}

/* --- toolbar: count and sort ------------------------------------------------ */

.shop-toolbar {
    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);
    padding-block-end: var(--s-4);
    border-bottom: 1px solid var(--c-border);
}

.shop-toolbar__count {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-muted);
}

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

.shop-sort__label {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    white-space: nowrap;
}

.shop-page .shop-sort__select {
    width: auto;
    min-height: 40px;
    padding-block: 0.4rem;
    padding-inline-end: 2.2rem;
    font-size: var(--t-sm);
    font-weight: 600;
}

.shop-sort__apply {
    min-height: 40px;
    padding: 0.4rem 0.9rem;
}

.shop-sort[data-enhanced] .shop-sort__apply {
    display: none;
}

/* --- product grid ------------------------------------------------------------ */
/* Two columns on a phone: one card per screen is a slow way to browse. */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
        gap: var(--s-5);
    }
}

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

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

.shop-grid__item > * {
    flex: 1 1 auto;
}

@media (max-width: 39.99rem) {
    .cms-items--grid.shop-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-3);
    }
}

.cms-items--grid.shop-items {
    --col-min: 14rem;
}

.cms-items.shop-items > .cms-items__item {
    display: flex;
}

.shop-products-block__more {
    display: flex;
    justify-content: center;
    margin: var(--s-6) 0 0;
}

/* --- product card ------------------------------------------------------------ */

.shop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--card-bg, var(--c-surface));
    border: var(--card-border, 1px solid var(--c-border));
    border-radius: var(--card-radius, var(--r-md));
    box-shadow: var(--card-shadow, none);
    color: var(--c-text);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.shop-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-lg, var(--shadow-lift));
}

@media (prefers-reduced-motion: no-preference) {
    .shop-card:hover {
        transform: translateY(-2px);
    }
}

.shop-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--c-surface-sunk);
}

.shop-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.shop-card:hover .shop-card__img {
    transform: scale(1.04);
}

.shop-card--out .shop-card__img {
    opacity: 0.6;
    filter: grayscale(0.4);
}

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

.shop-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3);
}

@media (min-width: 40rem) {
    .shop-card__body {
        padding: var(--s-4) var(--s-4) var(--s-5);
    }
}

.shop-card__brand {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-faint);
}

.shop-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    letter-spacing: 0;
    color: var(--c-text-strong);
}

@media (min-width: 40rem) {
    .shop-card__title {
        font-size: var(--t-base);
    }
}

.shop-card__link {
    color: inherit;
    text-decoration: none;
}

.shop-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

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

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

.shop-card__foot {
    display: grid;
    gap: var(--s-3);
    margin-block-start: auto;
    padding-block-start: var(--s-1);
}

.shop-card__actions {
    position: relative;
    z-index: 2;
    display: flex;
}

.shop-card__form {
    display: flex;
    flex: 1 1 auto;
}

.shop-card__btn {
    flex: 1 1 auto;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    font-size: var(--t-xs);
}

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

@media (max-width: 23rem) {
    .shop-card__btn .cms-icon {
        display: none;
    }
}

/* --- badge, stock, price ------------------------------------------------------ */

.shop-badge {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 1;
    padding: 0.25rem 0.55rem;
    border-radius: var(--r-sm);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-accent-contrast);
    background: var(--c-accent);
}

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

.shop-badge--hit {
    background: var(--c-mark);
    color: var(--c-slab, #12151c);
}

.shop-badge--sale {
    background: var(--c-danger);
    color: var(--c-surface);
}

.shop-badge--lg {
    top: var(--s-4);
    left: var(--s-4);
    padding: 0.35rem 0.75rem;
    font-size: var(--t-xs);
}

.shop-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin: 0;
    font-size: var(--t-xs);
    font-weight: 600;
}

.shop-stock__dot {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: currentColor;
}

.shop-stock--in {
    color: var(--c-success);
}

.shop-stock--in .shop-stock__dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

.shop-stock--out {
    color: var(--c-text-faint);
}

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

.shop-price p {
    margin: 0;
}

.shop-price__now {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.3em;
    color: var(--c-text-strong);
}

.shop-price__from {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--c-text-muted);
}

.shop-price__value {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tr-snug);
    white-space: nowrap;
}

.shop-price__was {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-block-start: 0.15rem !important;
}

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

.shop-price__old {
    font-size: var(--t-xs);
    color: var(--c-text-faint);
    white-space: nowrap;
}

.shop-price__off {
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-xs, 3px);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 12%, transparent);
}

.shop-price__off:empty {
    display: none;
}

.shop-price__ask {
    font-weight: 650;
    color: var(--c-text-muted);
}

.shop-price--sm .shop-price__value {
    font-size: var(--t-md);
}

.shop-price--lg .shop-price__value {
    font-size: var(--t-2xl);
    line-height: 1.1;
}

.shop-price--lg .shop-price__old {
    font-size: var(--t-base);
}

.shop-price--lg .shop-price__off {
    font-size: var(--t-xs);
}

/* A signed-in customer's own price («Ваша цена — скидка группы «Опт» 5 %»),
   and «Войдите, чтобы увидеть цены» (doc/shop-customers.md). */
.shop-price__your {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-block-start: 0.2rem !important;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-success);
}

.shop-price__your .cms-icon {
    flex: none;
    width: 0.95em;
    height: 0.95em;
}

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

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

.shop-price__login {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-link);
    text-decoration: none;
}

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

.shop-price__login .cms-icon {
    flex: none;
    width: 1em;
    height: 1em;
}

.shop-price--lg .shop-price__login {
    font-size: var(--t-base);
}

.shop-login-gate {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface-sunk);
}

.shop-login-gate p {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--t-sm);
}

.shop-login-gate__title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--c-text-strong) !important;
    font-weight: 650;
    font-size: var(--t-base) !important;
}

.shop-login-gate .cms-btn {
    justify-self: start;
}

.shop-line__your {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-success);
}

.shop-summary__your {
    display: flex;
    align-items: flex-start;
    gap: 0.45em;
    margin: 0 0 var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--c-text);
    background: color-mix(in srgb, var(--c-success) 10%, transparent);
}

.shop-summary__your .cms-icon {
    flex: none;
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.1em;
    color: var(--c-success);
}

/* --- category tile ------------------------------------------------------------ */

.shop-tile {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    overflow: hidden;
    background: var(--card-bg, var(--c-surface));
    border: var(--card-border, 1px solid var(--c-border));
    border-radius: var(--card-radius, var(--r-md));
    box-shadow: var(--card-shadow, none);
    color: var(--c-text);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.shop-tile:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-lg, var(--shadow-lift));
}

.shop-tile__media {
    background: var(--c-surface-sunk);
}

.shop-tile__img {
    transition: transform 0.7s var(--ease);
}

.shop-tile:hover .shop-tile__img {
    transform: scale(1.05);
}

.shop-tile__icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.75rem;
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

.shop-tile__body {
    grid-area: 2 / 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5) var(--s-5);
}

.shop-tile__title {
    margin: 0;
    padding-inline-end: var(--s-7);
    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-tile__link {
    color: inherit;
    text-decoration: none;
}

.shop-tile__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

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

.shop-tile__count,
.shop-tile__text {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--c-text-muted);
}

.shop-tile__children {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
}

.shop-tile__child {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill, 999px);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.shop-tile__child:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

.shop-tile__arrow {
    grid-area: 2 / 1;
    position: relative;
    top: var(--s-4);
    z-index: 1;
    justify-self: end;
    align-self: start;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-inline-end: var(--s-4);
    border-radius: 999px;
    background: var(--c-surface-sunk);
    color: var(--c-text-strong);
    font-size: 1rem;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
    pointer-events: none;
}

.shop-tile:hover .shop-tile__arrow {
    background: var(--c-accent);
    color: var(--c-accent-contrast);
    transform: rotate(45deg);
}

.shop-tile--compact .shop-tile__body {
    gap: 0.15rem;
    padding: var(--s-3) var(--s-4) var(--s-4);
}

.shop-tile--compact .shop-tile__title {
    padding-inline-end: var(--s-6);
    font-size: var(--t-sm);
}

@media (min-width: 40rem) {
    .shop-tile--compact .shop-tile__title {
        font-size: var(--t-base);
    }
}

.shop-tile--compact .shop-tile__count {
    font-size: var(--t-xs);
}

.shop-tile--compact .shop-tile__arrow {
    top: var(--s-3);
    width: 1.75rem;
    height: 1.75rem;
    margin-inline-end: var(--s-3);
    font-size: 0.85rem;
}

/* Overlay: the text on the picture. */
.shop-tile--overlay {
    grid-template-rows: 1fr;
    min-height: 16rem;
    border: 0;
    color: #fff;
    background: var(--c-slab, #12151c);
}

.shop-tile--overlay > * {
    grid-area: 1 / 1;
}

.shop-tile--overlay .shop-tile__media {
    height: 100%;
}

.shop-tile--overlay .shop-tile__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(8 10 14 / 0.82), rgb(8 10 14 / 0.25) 55%, rgb(8 10 14 / 0.05));
}

.shop-tile--overlay .shop-tile__body {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    padding: var(--s-6);
}

.shop-tile--overlay :is(.shop-tile__title, .shop-tile__link) {
    color: #fff;
}

.shop-tile--overlay :is(.shop-tile__count, .shop-tile__text) {
    color: rgb(255 255 255 / 0.78);
}

.shop-tile--overlay .shop-tile__child {
    border-color: rgb(255 255 255 / 0.35);
    color: #fff;
}

.shop-tile--overlay .shop-tile__arrow {
    top: var(--s-5);
    margin-inline-end: var(--s-5);
    background: rgb(255 255 255 / 0.16);
    color: #fff;
}

/* --- shop front page ---------------------------------------------------------- */

.shop-sections {
    margin-block-end: var(--sp-sm, var(--s-8));
}

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

@media (min-width: 40rem) {
    .shop-sections__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-5);
    }
}

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

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

.shop-sections__list > li {
    display: flex;
    min-width: 0;
}

.shop-featured__title,
.shop-related__title {
    margin-block-end: var(--s-5);
    font-size: var(--t-xl);
}

/* --- empty state, notes ------------------------------------------------------- */

.shop-empty {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-5);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-lg);
    text-align: center;
}

.shop-empty__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 1.5rem;
}

.shop-empty__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--fw-heading);
    color: var(--c-text-strong);
}

.shop-empty__hint {
    max-width: 34rem;
    margin: 0;
    color: var(--c-text-muted);
}

.shop-empty .cms-actions {
    justify-content: center;
    margin-block-start: var(--s-2);
}

.shop-note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin: 0 0 var(--s-5);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface-sunk);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--c-text);
}

.shop-note > .cms-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    color: var(--c-text-muted);
}

.shop-note--ok {
    border-color: color-mix(in srgb, var(--c-success) 35%, transparent);
    background: color-mix(in srgb, var(--c-success) 8%, var(--c-surface));
}

.shop-note--ok > .cms-icon {
    color: var(--c-success);
}

.shop-note--warn {
    border-color: color-mix(in srgb, var(--c-danger) 35%, transparent);
    background: color-mix(in srgb, var(--c-danger) 7%, var(--c-surface));
}

.shop-note--warn > .cms-icon {
    color: var(--c-danger);
}

.shop-note__title {
    margin: 0 0 var(--s-1);
    font-weight: 650;
    color: var(--c-text-strong);
}

.shop-note__list {
    margin: 0 0 var(--s-2);
    padding-inline-start: 1.1rem;
}

.shop-note__link {
    font-weight: 600;
}

/* --- SEO text --------------------------------------------------------------- */

.shop-seo {
    max-width: 52rem;
    margin-block-start: var(--sp-sm, var(--s-8));
    padding-block-start: var(--s-7);
    border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   Product page
   ========================================================================== */

.shop-product__top {
    display: grid;
    gap: var(--s-6);
}

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

/* --- gallery ---------------------------------------------------------------- */

.shop-gallery {
    min-width: 0;
}

@media (min-width: 60rem) {
    .shop-gallery {
        position: sticky;
        top: var(--s-5);
    }
}

.shop-gallery__stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-surface-sunk);
}

.shop-gallery__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.shop-gallery__track::-webkit-scrollbar {
    display: none;
}

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

.shop-gallery__slide {
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
}

@media (min-width: 60rem) {
    .shop-gallery__slide {
        aspect-ratio: 5 / 4;
    }
}

.shop-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s var(--ease);
}

.shop-gallery__empty {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    font-size: 4rem;
    color: var(--c-text-faint);
}

.shop-gallery__counter {
    position: absolute;
    right: var(--s-4);
    bottom: var(--s-4);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgb(8 10 14 / 0.55);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.shop-gallery__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -1.375rem;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.9);
    color: #12151c;
    font-size: 1.25rem;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

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

.shop-gallery__nav--prev {
    left: var(--s-4);
}

.shop-gallery__nav--next {
    right: var(--s-4);
}

.shop-gallery__stage:hover .shop-gallery__nav,
.shop-gallery__nav:focus-visible {
    opacity: 1;
}

.shop-gallery__stage:hover .shop-gallery__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (hover: none) {
    .shop-gallery__nav {
        display: none;
    }
}

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

.shop-gallery__thumbs > li {
    flex: 0 0 auto;
}

.shop-gallery__thumb {
    display: block;
    width: 4.5rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    opacity: 0.7;
    transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

@media (min-width: 40rem) {
    .shop-gallery__thumb {
        width: 5.5rem;
    }
}

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

.shop-gallery__thumb:hover {
    opacity: 1;
}

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

/* --- summary column ---------------------------------------------------------- */

.shop-product__summary {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    min-width: 0;
}

.shop-product__brand {
    margin: 0 0 calc(var(--s-4) * -1);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.shop-product__title {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
}

.shop-product__lead {
    margin: 0;
    font-size: var(--t-md);
    line-height: 1.6;
}

/* --- buy box ------------------------------------------------------------------- */

.shop-buy {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-md, none);
}

@media (min-width: 40rem) {
    .shop-buy {
        padding: var(--s-6);
    }
}

.shop-buy__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
}

.shop-buy__form {
    display: grid;
    gap: var(--s-4);
}

.shop-buy__row {
    display: flex;
    gap: var(--s-3);
}

.shop-buy__add {
    flex: 1 1 auto;
    min-height: 52px;
    font-size: var(--t-base);
}

.shop-buy__now {
    min-height: 48px;
}

.shop-buy__add:disabled,
.shop-buy__now:disabled {
    border-color: var(--c-border);
    background: var(--c-surface-sunk);
    color: var(--c-text-faint);
    cursor: not-allowed;
    transform: none;
}

.shop-buy__sku,
.shop-buy__none {
    margin: calc(var(--s-2) * -1) 0 0;
    font-size: var(--t-xs);
    color: var(--c-text-muted);
}

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

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

/* Option axes: chips; the no-script variant list: radio cards. */
.shop-axes {
    display: grid;
    gap: var(--s-4);
}

.shop-axes[hidden],
.shop-variants[hidden] {
    display: none;
}

.shop-axis,
.shop-variants {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.shop-axis__legend,
.shop-variants__legend {
    margin-block-end: var(--s-2);
    padding: 0;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-muted);
}

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

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

.shop-chip {
    position: relative;
    display: inline-flex;
}

.shop-chip__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.shop-chip__label {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.45rem 0.95rem;
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
    background: var(--c-surface);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    pointer-events: none;
}

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

.shop-chip__input:checked + .shop-chip__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-chip__input:focus-visible + .shop-chip__label {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Exists, but not in stock with the other choices. */
.shop-chip.is-out .shop-chip__label {
    color: var(--c-text-faint);
    text-decoration: line-through;
    text-decoration-color: var(--c-text-faint);
}

/* No such combination at all. */
.shop-chip__input:disabled {
    cursor: not-allowed;
}

.shop-chip__input:disabled + .shop-chip__label {
    border-style: dashed;
    color: var(--c-text-faint);
    opacity: 0.6;
}

.shop-variants__list {
    display: grid;
    gap: var(--s-2);
}

.shop-variant {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.6rem var(--s-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    cursor: pointer;
}

.shop-variant:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.shop-variant__input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--c-accent);
}

.shop-variant__label {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--c-text-strong);
}

.shop-variant__price {
    font-weight: 650;
    white-space: nowrap;
}

.shop-variant.is-out {
    cursor: not-allowed;
    color: var(--c-text-faint);
}

.shop-variant.is-out .shop-variant__label {
    color: var(--c-text-faint);
}

/* Quantity stepper. */
.shop-qty {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    overflow: hidden;
}

.shop-qty:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px var(--c-accent);
}

.shop-qty__btn {
    display: grid;
    place-items: center;
    width: 2.6rem;
    border: 0;
    background: none;
    color: var(--c-text-strong);
    font-size: 1rem;
}

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

.shop-qty__btn:hover {
    background: var(--c-surface-sunk);
}

.shop-qty__btn:disabled {
    color: var(--c-text-faint);
    cursor: not-allowed;
}

.shop-page .shop-qty__input,
.shop-qty__input {
    width: 3.75rem;
    min-height: 50px;
    padding: 0 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

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

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

.shop-qty[data-enhanced] .shop-qty__input {
    width: 2.75rem;
}

.shop-qty--sm .shop-qty__input {
    min-height: 40px;
}

.shop-qty--sm .shop-qty__btn {
    width: 2.25rem;
}

/* --- advantages, key specs ------------------------------------------------------ */

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

.shop-pros__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    line-height: 1.45;
}

.shop-pros__item .cms-icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.05rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    stroke-width: 3;
}

.shop-keyspecs {
    padding-block-start: var(--s-5);
    border-top: 1px solid var(--c-border);
}

.shop-keyspecs__title {
    margin-block-end: var(--s-3);
    font-size: var(--t-base);
}

.shop-keyspecs__list {
    display: grid;
    gap: var(--s-2);
    margin: 0;
}

.shop-keyspecs__row {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    font-size: var(--t-sm);
}

.shop-keyspecs__row dt {
    flex-shrink: 0;
    color: var(--c-text-muted);
}

.shop-keyspecs__row dd {
    order: 2;
    margin: 0 0 0 auto;
    font-weight: 600;
    color: var(--c-text-strong);
    text-align: right;
}

.shop-keyspecs__row::before {
    content: "";
    order: 1;
    flex: 1 1 1rem;
    min-width: 1rem;
    border-bottom: 1px dotted var(--c-border-strong);
    transform: translateY(-0.3em);
}

.shop-keyspecs__all {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-block-start: var(--s-3);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
}

/* --- tabs ---------------------------------------------------------------------- */

.shop-tabs {
    margin-block-start: var(--sp-sm, var(--s-8));
}

.shop-tabs__bar {
    display: flex;
    gap: var(--s-5);
    margin-block-end: var(--s-6);
    border-bottom: 1px solid var(--c-border);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.shop-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
    margin-bottom: -1px;
    padding: 0 0 var(--s-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--c-text-muted);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.shop-tabs__tab:hover,
.shop-tabs__tab[aria-selected='true'] {
    color: var(--c-text-strong);
}

.shop-tabs__tab[aria-selected='true'] {
    border-bottom-color: var(--c-accent);
}

.shop-tabs__n {
    padding: 0 0.45em;
    border-radius: 999px;
    background: var(--c-surface-sunk);
    font-family: var(--font-ui);
    font-size: var(--t-xs);
    color: var(--c-text-muted);
}

.shop-tabs__panel + .shop-tabs__panel {
    margin-block-start: var(--s-8);
}

.shop-tabs[data-ready] .shop-tabs__panel + .shop-tabs__panel {
    margin-block-start: 0;
}

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

.shop-tabs__panel:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 6px;
    border-radius: var(--r-sm);
}

.shop-tabs__heading {
    margin-block-end: var(--s-5);
    font-size: var(--t-xl);
}

.shop-tabs[data-ready] .shop-tabs__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.shop-desc {
    display: grid;
    gap: var(--s-7);
    max-width: var(--w-prose);
}

.shop-video {
    margin: 0;
}

.shop-specs {
    width: 100%;
    max-width: 52rem;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

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

.shop-specs tbody th[scope='row'] {
    width: 45%;
    font-weight: 450;
    color: var(--c-text-muted);
}

.shop-specs td {
    font-weight: 600;
    color: var(--c-text-strong);
}

.shop-specs__group th {
    padding-block: var(--s-5) var(--s-2);
    border-bottom: 2px solid var(--c-text-strong);
    font-family: var(--font-display);
    font-size: var(--t-base);
    font-weight: var(--fw-heading);
    color: var(--c-text-strong);
}

.shop-specs tbody:first-child .shop-specs__group th {
    padding-block-start: 0;
}

@media (max-width: 39.99rem) {
    .shop-specs th,
    .shop-specs td {
        padding-inline: var(--s-1);
    }
}

.shop-docs {
    max-width: 44rem;
}

.shop-blocks {
    margin-block-start: var(--sp-sm, var(--s-8));
}

.shop-related {
    margin-block-start: var(--sp-sm, var(--s-8));
    padding-block-start: var(--sp-sm, var(--s-8));
    border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   Cart and checkout
   ========================================================================== */

.shop-cart,
.shop-checkout {
    display: grid;
    gap: var(--s-6);
    align-items: start;
}

@media (min-width: 60rem) {
    .shop-cart,
    .shop-checkout {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: var(--s-7);
    }
}

@media (min-width: 75rem) {
    .shop-cart,
    .shop-checkout {
        grid-template-columns: minmax(0, 1fr) 24rem;
    }
}

.shop-cart__lines,
.shop-checkout__main {
    min-width: 0;
}

/* --- cart lines ---------------------------------------------------------------- */

.shop-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-border);
}

.shop-line {
    position: relative;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    grid-template-areas:
        "media info remove"
        "media price price"
        "qty qty total";
    gap: var(--s-2) var(--s-4);
    align-items: center;
    padding-block: var(--s-5);
    border-bottom: 1px solid var(--c-border);
}

@media (min-width: 40rem) {
    .shop-line {
        grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem auto 6.5rem 2.25rem;
        grid-template-areas: "media info price qty total remove";
        gap: var(--s-4);
    }
}

.shop-line__media {
    grid-area: media;
    align-self: start;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--c-surface-sunk);
}

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

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

.shop-line__info {
    grid-area: info;
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.shop-line__info p {
    margin: 0;
}

.shop-line__title {
    font-weight: 650;
    line-height: var(--lh-snug);
    color: var(--c-text-strong);
}

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

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

.shop-line__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-3);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

.shop-line__sku {
    font-size: var(--t-xs);
    color: var(--c-text-faint);
}

.shop-line__problem {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-danger);
}

.shop-line--problem .shop-line__media {
    opacity: 0.55;
}

.shop-line__price {
    grid-area: price;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s-2);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

@media (min-width: 40rem) {
    .shop-line__price {
        flex-direction: column;
        align-items: flex-end;
    }
}

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

.shop-line__old {
    font-size: var(--t-xs);
    color: var(--c-text-faint);
    white-space: nowrap;
}

.shop-line__qty {
    grid-area: qty;
}

.shop-line__total {
    grid-area: total;
    display: grid;
    justify-items: end;
    text-align: right;
}

.shop-line__sum {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--c-text-strong);
    white-space: nowrap;
}

.shop-line__sum--off {
    color: var(--c-text-faint);
}

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

.shop-line__remove {
    grid-area: remove;
    align-self: start;
    justify-self: end;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--c-text-muted);
    font-size: 1.1rem;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

@media (min-width: 40rem) {
    .shop-line__remove {
        align-self: center;
    }
}

.shop-line__remove:hover {
    background: color-mix(in srgb, var(--c-danger) 10%, transparent);
    color: var(--c-danger);
}

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

.shop-cart[data-enhanced] [data-shop-nojs] {
    display: none;
}

.shop-cart.is-busy .shop-lines,
.shop-cart.is-busy .shop-totals {
    opacity: 0.55;
    transition: opacity 0.2s var(--ease) 0.15s;
}

.shop-link-back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
}

/* --- summary (cart and checkout) -------------------------------------------------- */

.shop-summary {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-md, none);
}

@media (min-width: 60rem) {
    .shop-summary {
        position: sticky;
        top: var(--s-5);
        padding: var(--s-6);
    }
}

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

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

.shop-summary__edit {
    font-size: var(--t-sm);
    font-weight: 600;
}

.shop-summary__go {
    width: 100%;
    min-height: 54px;
    font-size: var(--t-base);
}

.shop-summary__go:disabled {
    background: var(--c-surface-sunk);
    color: var(--c-text-faint);
    cursor: not-allowed;
}

.shop-summary__hint,
.shop-summary__secure,
.shop-summary__free {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: calc(var(--s-2) * -1) 0 0;
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--c-text-muted);
}

.shop-summary__free {
    margin: 0;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    background: var(--c-accent-soft);
    font-size: var(--t-sm);
    color: var(--c-text-strong);
}

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

.shop-summary .cms-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
}

.shop-totals {
    display: grid;
    gap: var(--s-2);
    margin: 0;
}

.shop-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--t-sm);
}

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

.shop-totals__row dt {
    color: var(--c-text-muted);
}

.shop-totals__row dd {
    margin: 0;
    font-weight: 600;
    color: var(--c-text-strong);
    white-space: nowrap;
    text-align: right;
}

.shop-totals__row--muted dd {
    font-weight: 450;
    color: var(--c-text-muted);
}

.shop-totals__row--discount dd {
    color: var(--c-danger);
}

.shop-totals__code {
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-xs, 3px);
    background: var(--c-surface-sunk);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--c-text);
}

.shop-totals__row--total {
    margin-block-start: var(--s-2);
    padding-block-start: var(--s-3);
    border-top: 1px solid var(--c-border);
}

.shop-totals__row--total dt {
    font-weight: 650;
    font-size: var(--t-base);
    color: var(--c-text-strong);
}

.shop-totals__row--total dd {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: var(--tr-snug);
}

/* --- promo ------------------------------------------------------------------- */

.shop-promo {
    display: grid;
    gap: var(--s-2);
}

.shop-promo__label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
}

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

.shop-page .shop-promo__input {
    min-width: 0;
    min-height: 44px;
    text-transform: uppercase;
}

.shop-promo__apply {
    min-height: 44px;
    padding-inline: 1rem;
}

.shop-promo__applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-2) var(--s-3);
    border: 1px dashed color-mix(in srgb, var(--c-success) 50%, transparent);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--c-success) 7%, var(--c-surface));
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-success);
}

.shop-promo__applied span {
    flex: 1 1 auto;
}

.shop-promo__remove {
    border: 0;
    background: none;
    padding: 0.25rem;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    text-decoration: underline;
}

/* --- form fields ---------------------------------------------------------------- */

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

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

.shop-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    grid-column: span 2;
    min-width: 0;
}

.shop-fields--address .shop-field {
    grid-column: span 4;
}

.shop-fields--address .shop-field--xs {
    grid-column: span 2;
}

@media (min-width: 40rem) {
    .shop-field {
        grid-column: span 1;
    }

    .shop-fields--address .shop-field {
        grid-column: span 2;
    }

    .shop-fields--address .shop-field--xs {
        grid-column: span 1;
    }
}

.shop-field--wide,
.shop-fields .shop-field--wide,
.shop-fields--address .shop-field--wide {
    grid-column: 1 / -1;
}

.shop-field__label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
}

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

.shop-field__hint {
    margin: 0;
    font-size: var(--t-xs);
    color: var(--c-text-muted);
}

.shop-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 550;
    line-height: 1.4;
    color: var(--c-danger);
}

.shop-field__error .cms-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
}

.shop-page [aria-invalid='true'].shop-field__input,
.shop-page input[aria-invalid='true'] {
    border-color: var(--c-danger);
}

.shop-errors {
    margin-block-end: var(--s-6);
    padding: var(--s-4) var(--s-5);
    border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent);
    border-inline-start-width: 4px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--c-danger) 6%, var(--c-surface));
}

.shop-errors:focus {
    outline: 2px solid var(--c-danger);
    outline-offset: 2px;
}

.shop-errors__title {
    margin: 0 0 var(--s-2);
    font-weight: 650;
    color: var(--c-text-strong);
}

.shop-errors__list {
    display: grid;
    gap: var(--s-1);
    margin: 0;
    padding-inline-start: 1.1rem;
    font-size: var(--t-sm);
}

.shop-errors__list a {
    color: var(--c-danger);
}

/* --- checkout steps ------------------------------------------------------------- */

.shop-step {
    min-width: 0;
    margin: 0 0 var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

@media (min-width: 40rem) {
    .shop-step {
        padding: var(--s-6);
    }
}

.shop-step__title {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-block-end: var(--s-5);
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--fw-heading);
    color: var(--c-text-strong);
}

.shop-step__title + * {
    clear: both;
}

.shop-step__n {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-family: var(--font-ui);
    font-size: var(--t-sm);
    font-weight: 700;
}

.shop-step > .shop-field__error {
    margin-block-end: var(--s-3);
}

.shop-options {
    display: grid;
    gap: var(--s-3);
}

.shop-option {
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

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

.shop-option:hover {
    border-color: var(--c-border-strong);
}

.shop-option:has(.shop-option__input:checked) {
    border-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent-soft) 45%, var(--c-surface));
}

.shop-option:has(.shop-option__input:focus-visible) {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.shop-option__main {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
        "radio icon body"
        ". . price";
    gap: var(--s-1) var(--s-3);
    align-items: start;
    padding: var(--s-4);
    cursor: pointer;
}

@media (min-width: 40rem) {
    .shop-option__main {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "radio icon body price";
        gap: var(--s-4);
    }
}

.shop-option__input {
    grid-area: radio;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.55rem 0 0;
    accent-color: var(--c-accent);
}

.shop-option__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-sm);
    background: var(--c-surface-sunk);
    color: var(--c-text-strong);
    font-size: 1.1rem;
}

.shop-option__body {
    grid-area: body;
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

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

.shop-option__desc {
    font-size: var(--t-sm);
    line-height: 1.45;
    color: var(--c-text-muted);
}

.shop-option__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--t-xs);
    color: var(--c-text-muted);
}

.shop-option__meta .cms-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.shop-option__price {
    grid-area: price;
    display: grid;
    justify-items: start;
    font-weight: 650;
    color: var(--c-text-strong);
    white-space: nowrap;
}

@media (min-width: 40rem) {
    .shop-option__price {
        justify-items: end;
        text-align: right;
    }
}

.shop-option__free {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--c-success);
}

.shop-option__extra {
    display: grid;
    gap: var(--s-2);
    margin: 0 var(--s-4) var(--s-4);
    padding-block-start: var(--s-4);
    border-top: 1px solid var(--c-border);
}

@media (min-width: 40rem) {
    .shop-option__extra {
        margin-inline-start: calc(var(--s-4) + 1.15rem + var(--s-4) + 2.25rem + var(--s-4));
    }
}

.shop-points {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.shop-point {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.45;
    cursor: pointer;
}

.shop-point input {
    flex-shrink: 0;
    margin-top: 0.2rem;
    accent-color: var(--c-accent);
}

.shop-point--single {
    cursor: default;
}

.shop-point .cms-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--c-accent);
}

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

.shop-address,
.shop-company {
    margin-block-start: var(--s-5);
    padding-block-start: var(--s-5);
    border-top: 1px solid var(--c-border);
}

.shop-address__title {
    margin: 0 0 var(--s-4);
    font-weight: 650;
    color: var(--c-text-strong);
}

/* Show only what the chosen delivery and payment need — CSS alone, so it
   works before (and without) the script. Browsers without :has() show all. */
@supports selector(:has(*)) {
    .shop-checkout:not(:has(input[name='delivery_method'][data-type='courier']:checked)) .shop-address,
    .shop-checkout:not(:has(input[name='payment_method'][data-provider='invoice']:checked)) .shop-company,
    .shop-option:not(:has(.shop-option__input:checked)) > .shop-option__extra {
        display: none;
    }
}

.shop-page textarea.shop-field__input {
    min-height: 6rem;
}

.shop-consent {
    display: grid;
    gap: var(--s-3);
    padding-block-start: var(--s-4);
    border-top: 1px solid var(--c-border);
}

.shop-check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-size: var(--t-sm);
    line-height: 1.45;
    cursor: pointer;
}

.shop-check input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.1rem 0 0;
    accent-color: var(--c-accent);
}

/* --- checkout summary lines ------------------------------------------------------ */

.shop-mini-lines {
    display: grid;
    gap: var(--s-3);
    max-height: 22rem;
    margin: 0;
    padding: 0.75rem 0.5rem 0 0;
    list-style: none;
    overflow-y: auto;
}

.shop-mini-line {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    font-size: var(--t-sm);
}

.shop-mini-line__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-sm);
    background: var(--c-surface-sunk);
    color: var(--c-text-faint);
}

.shop-mini-line__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-sm);
}

.shop-mini-line__qty {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--c-text-strong);
    color: var(--c-bg);
    font-size: 0.7rem;
    font-weight: 700;
}

.shop-mini-line__info {
    display: grid;
    min-width: 0;
}

.shop-mini-line__title {
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-text-strong);
}

.shop-mini-line__variant {
    font-size: var(--t-xs);
    color: var(--c-text-muted);
}

.shop-mini-line__sum {
    font-weight: 600;
    white-space: nowrap;
}

/* ==========================================================================
   Order page, payment redirect
   ========================================================================== */

.shop-thanks {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    margin-block-end: var(--s-7);
    padding: var(--s-7) var(--s-5);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--c-success) 7%, var(--c-surface));
    text-align: center;
}

.shop-thanks__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-block-end: var(--s-2);
    border-radius: 999px;
    background: var(--c-success);
    color: var(--c-surface);
    font-size: 2rem;
}

.shop-thanks__title {
    font-size: var(--t-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
}

.shop-thanks__number {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 650;
    color: var(--c-text-strong);
}

.shop-thanks__lead {
    max-width: 34rem;
    margin: 0;
    color: var(--c-text-muted);
}

.shop-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: var(--r-pill, 999px);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: var(--t-xs);
    font-weight: 700;
}

.shop-status--completed,
.shop-status--pay-paid {
    background: color-mix(in srgb, var(--c-success) 14%, transparent);
    color: var(--c-success);
}

.shop-status--cancelled,
.shop-status--pay-refunded {
    background: var(--c-surface-sunk);
    color: var(--c-text-muted);
}

.shop-status--pay-unpaid,
.shop-status--pay-pending,
.shop-status--pay-partially_paid {
    background: var(--c-mark-soft);
    color: var(--c-mark-text);
}

.shop-status--pay-overpaid {
    background: color-mix(in srgb, var(--c-success) 14%, transparent);
    color: var(--c-success);
}

.shop-status--pay-partially_refunded {
    background: var(--c-surface-sunk);
    color: var(--c-text-muted);
}

/* The shop's own status colour (admin «Статусы заказов»). */
.shop-status[style*="--shop-status"] {
    background: color-mix(in srgb, var(--shop-status) 14%, transparent);
    color: color-mix(in srgb, var(--shop-status) 78%, var(--c-text-strong, #111));
}

.shop-timeline__sub {
    display: block;
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--c-text-muted);
}

.shop-paybox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-block-end: var(--s-5);
    padding: var(--s-5);
    border: 1.5px solid var(--c-accent);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--c-accent-soft) 40%, var(--c-surface));
}

.shop-paybox__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--c-text-strong);
}

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

.shop-card-box {
    margin-block-end: var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

@media (min-width: 40rem) {
    .shop-card-box {
        padding: var(--s-6);
    }
}

.shop-card-box__title {
    margin-block-end: var(--s-4);
    font-size: var(--t-md);
}

.shop-card-box .shop-note {
    margin: 0;
}

.shop-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.shop-timeline__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    text-align: center;
    font-size: var(--t-xs);
    line-height: 1.3;
    color: var(--c-text-muted);
}

/* The rail between the dots. */
.shop-timeline__step + .shop-timeline__step::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--c-border);
}

.shop-timeline__step.is-done::before,
.shop-timeline__step.is-current::before {
    background: var(--c-success) !important;
}

.shop-timeline__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--c-border-strong);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-surface);
    font-size: 0.85rem;
}

.shop-timeline__step.is-done .shop-timeline__dot,
.shop-timeline__step.is-current .shop-timeline__dot {
    border-color: var(--c-success);
    background: var(--c-success);
}

.shop-timeline__step.is-current .shop-timeline__dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success) 20%, transparent);
}

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

.shop-order__pay-status {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

.shop-invoice__lead,
.shop-invoice__buyer {
    margin: 0 0 var(--s-4);
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--c-text-muted);
}

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

.shop-reqs {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--c-border);
    font-size: var(--t-sm);
}

.shop-reqs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem var(--s-4);
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--c-border);
}

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

.shop-reqs__row dt {
    color: var(--c-text-muted);
}

.shop-reqs__row dd {
    margin: 0;
    font-weight: 600;
    color: var(--c-text-strong);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.shop-reqs__row--sum dd {
    font-family: var(--font-display);
    font-size: var(--t-md);
}

.shop-order-items {
    display: grid;
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-border);
}

.shop-order-item {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: var(--s-4);
    align-items: center;
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--t-sm);
}

.shop-order-item__media {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--c-surface-sunk);
    color: var(--c-text-faint);
}

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

.shop-order-item__info {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.shop-order-item__title {
    font-weight: 650;
    color: var(--c-text-strong);
}

.shop-order-item__title a {
    color: inherit;
    text-decoration: none;
}

.shop-order-item__title a:hover {
    color: var(--c-link);
}

.shop-order-item__options,
.shop-order-item__qty {
    font-size: var(--t-xs);
    color: var(--c-text-muted);
}

.shop-order-item__sum {
    font-weight: 650;
    white-space: nowrap;
}

.shop-totals--order {
    max-width: 22rem;
    margin-inline-start: auto;
}

.shop-order-info {
    display: grid;
    gap: 0 var(--s-5);
}

@media (min-width: 40rem) {
    .shop-order-info {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.shop-order-info__lines {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.6;
}

.shop-order-info__lines strong {
    color: var(--c-text-strong);
}

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

.shop-order-actions__help {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

.shop-pay {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    max-width: 30rem;
    margin: var(--s-8) auto;
    padding: var(--s-7) var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    text-align: center;
}

.shop-pay__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 1.5rem;
}

.shop-pay__title {
    font-size: var(--t-xl);
}

.shop-pay__text {
    margin: 0;
    color: var(--c-text-muted);
}

@media print {
    .shop-minicart,
    .shop-paybox,
    .shop-order-actions .cms-btn {
        display: none;
    }
}

/* --- header: the account link (customer accounts) ----------------------------- */

/* shop.js marks it for a signed-in browser (the hint cookie): a filled
   circle instead of an outline. */
.shop-hlink--account.is-signed-in {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent);
}