/* ==========================================================================
   Catalog module — storefront styles
   --------------------------------------------------------------------------
   Pages (/catalog, /catalog/{slug}, /product/{slug}) and the two blocks
   (catalog_products, catalog_categories). Every colour, radius, size and
   shadow is a design token, so a preset, a dark scheme or a coloured section
   restyles all of it; every class is prefixed `cat-`. Mobile first.

   Reused from the theme as-is: .cms-crumbs (breadcrumbs), .cms-seo__*
   (the folded SEO text), .cms-doc* (documents), .cms-video__* (video cover),
   .cms-btn, .cms-ratio, .cms-prose.
   ========================================================================== */

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

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

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

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

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

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

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

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

.cat-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);
}

/* --- section tree (category pages, wide screens only) ------------------- */
/* On a phone the subsection tiles and the breadcrumbs do this job; a tree
   above the products would push them a screen down. */

.cat-side {
    display: none;
}

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

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

.cat-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;
}

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

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

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

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

.cat-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);
}

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

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

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

/* --- category / catalogue header --------------------------------------- */

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

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

.cat-head__count {
    order: -1;
    justify-self: start;
    margin: 0;
    padding: 0.2rem 0.65rem;
    border-radius: var(--r-pill, 999px);
    background: var(--c-surface-sunk);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-text-muted);
}

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

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

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

/* --- banner ------------------------------------------------------------- */

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

.cat-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.cat-banner__link:hover img {
    transform: scale(1.02);
}

/* --- subsections (compact tiles) --------------------------------------- */

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

.cat-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) {
    .cat-subs__list {
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        gap: var(--s-4);
    }
}

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

/* --- product grid -------------------------------------------------------- */
/* Two columns on a phone, as every catalogue does — one card per screen is
   a slow way to browse forty products. */

.cat-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) {
    .cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        gap: var(--s-5);
    }
}

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

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

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

/* The block's grid comes from the theme's list partial; on a phone it too
   shows two cards side by side. */
@media (max-width: 39.99rem) {
    .cms-items--grid.cat-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-3);
    }
}

.cms-items--grid.cat-items {
    --col-min: 14.5rem;
}

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

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

.cat-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);
}

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

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

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

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

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

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

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

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

.cat-card__sku {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--c-text-faint);
}

.cat-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) {
    .cat-card__title {
        font-size: var(--t-base);
    }
}

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

/* The whole card is the title's link; the buttons sit above the overlay. */
.cat-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

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

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

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

.cat-card__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.cat-card__btn {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0.55rem 0.9rem;
    font-size: var(--t-xs);
}

/* "Details" is a square arrow beside the request button. */
.cat-card__more {
    flex: 0 0 40px;
    width: 40px;
    padding: 0;
    font-size: 1rem;
}

.cat-card__more--text {
    flex: 1 1 auto;
    width: auto;
    padding: 0.55rem 0.9rem;
    font-size: var(--t-xs);
}

/* On a phone the card itself is the "details" link. */
@media (max-width: 39.99rem) {
    .cat-card__more:not(.cat-card__more--text) {
        display: none;
    }

    .cat-card__btn {
        padding-inline: 0.5rem;
    }
}

/* --- badge ---------------------------------------------------------------- */

.cat-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) {
    .cat-badge {
        top: var(--s-3);
        left: var(--s-3);
    }
}

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

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

.cat-badge--order {
    background: var(--c-text-strong);
    color: var(--c-bg);
}

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

/* --- availability --------------------------------------------------------- */

.cat-avail {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin: 0;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-text-muted);
}

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

.cat-avail--in_stock {
    color: var(--c-success);
}

.cat-avail--on_order {
    color: var(--c-mark-text);
}

.cat-avail--out_of_stock {
    color: var(--c-text-faint);
}

.cat-avail--in_stock .cat-avail__dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

/* --- price ---------------------------------------------------------------- */

.cat-price p {
    margin: 0;
}

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

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

.cat-price__prefix,
.cat-price__unit {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--c-text-muted);
}

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

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

.cat-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);
}

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

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

.cat-price--sm .cat-price__ask {
    font-size: var(--t-sm);
}

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

.cat-price--lg .cat-price__prefix,
.cat-price--lg .cat-price__unit {
    font-size: var(--t-base);
}

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

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

.cat-price--lg .cat-price__ask {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    letter-spacing: var(--tr-snug);
}

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

.cat-tile {
    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);
}

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

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

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

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

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

.cat-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5) var(--s-5);
}

.cat-tile__title {
    margin: 0;
    padding-inline-end: var(--s-6);
    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);
}

.cat-tile__link {
    color: inherit;
    text-decoration: none;
}

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

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

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

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

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

.cat-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;
}

.cat-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);
}

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

.cat-tile__arrow {
    position: absolute;
    right: var(--s-4);
    bottom: auto;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    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;
}


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

/* The arrow shares the body's grid cell, beside the title. */
.cat-tile--tile,
.cat-tile--compact {
    display: grid;
    grid-template-rows: auto 1fr;
}

.cat-tile--tile .cat-tile__arrow,
.cat-tile--compact .cat-tile__arrow {
    grid-area: 2 / 1;
    position: relative;
    top: var(--s-4);
    right: auto;
    justify-self: end;
    align-self: start;
    margin-inline-end: var(--s-4);
}

.cat-tile--tile .cat-tile__body,
.cat-tile--compact .cat-tile__body {
    grid-area: 2 / 1;
}

/* Compact: the subsections on a category page. */
.cat-tile--compact .cat-tile__body {
    gap: 0.15rem;
    padding: var(--s-3) var(--s-4) var(--s-4);
}

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

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

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

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

.cat-tile--compact .cat-tile__icon {
    font-size: 2rem;
}

/* Overlay: the text on the picture, for a visual front page. */
.cat-tile--overlay {
    display: grid;
    min-height: 16rem;
    border: 0;
    color: #fff;
    background: var(--c-slab, #12151c);
}

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

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

.cat-tile--overlay .cat-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));
}

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

.cat-tile--overlay .cat-tile__title,
.cat-tile--overlay .cat-tile__link {
    color: #fff;
}

.cat-tile--overlay .cat-tile__title {
    font-size: var(--t-xl);
}

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

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

.cat-tile--overlay .cat-tile__child:hover {
    border-color: #fff;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
}

.cat-tile--overlay .cat-tile__arrow {
    top: var(--s-5);
    right: var(--s-5);
    background: rgb(255 255 255 / 0.16);
    color: #fff;
    backdrop-filter: blur(6px);
}

.cat-tile--overlay.cat-tile--nocover .cat-tile__icon {
    color: rgb(255 255 255 / 0.5);
    background: none;
}

/* --- catalogue home ------------------------------------------------------- */

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

.cat-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) {
    .cat-sections__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-5);
    }
}

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

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

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

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

/* --- empty state ---------------------------------------------------------- */

.cat-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;
}

.cat-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;
}

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

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

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

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

.cat-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
   ========================================================================== */

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

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

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

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

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

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

.cat-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;
}

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

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

.cat-gallery__slide {
    flex: 0 0 100%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
}

.cat-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.cat-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;
    backdrop-filter: blur(6px);
}

.cat-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), transform var(--dur) var(--ease);
}

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

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

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

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

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

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

.cat-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;
}

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

.cat-gallery__thumb {
    display: block;
    width: 5.25rem;
    aspect-ratio: 4 / 3;
    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) {
    .cat-gallery__thumb {
        width: 6.5rem;
    }
}

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

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

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

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

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

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

.cat-product__ids {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin: calc(var(--s-3) * -1) 0 0;
    font-size: var(--t-sm);
}

.cat-product__ids > div {
    display: flex;
    gap: 0.4em;
}

.cat-product__ids dt {
    color: var(--c-text-muted);
}

.cat-product__ids dt::after {
    content: ":";
}

.cat-product__ids dd {
    margin: 0;
    font-weight: 600;
    color: var(--c-text-strong);
}

.cat-buy {
    display: grid;
    gap: var(--s-4);
    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) {
    .cat-buy {
        padding: var(--s-6);
    }
}

.cat-buy__stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    margin: 0;
}

.cat-buy__stock .cat-avail {
    font-size: var(--t-sm);
}

.cat-buy__lead {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

.cat-buy__actions {
    display: grid;
    gap: var(--s-2);
}

@media (min-width: 30rem) {
    .cat-buy__actions {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}

.cat-buy__cta {
    min-height: 52px;
    font-size: var(--t-base);
}

.cat-buy__call {
    min-height: 52px;
    white-space: nowrap;
}

.cat-product__summary-text {
    margin: 0;
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--c-text);
}

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

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

.cat-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;
}

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

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

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

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

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


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

/* Dotted leader between the name and the value. */
.cat-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);
}

.cat-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;
}

.cat-keyspecs__all:hover .cms-icon {
    transform: translateX(2px);
}

.cat-keyspecs__all .cms-icon {
    transition: transform var(--dur) var(--ease);
}

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

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

.cat-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;
}

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

.cat-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);
}

@media (max-width: 39.99rem) {
    .cat-tabs__bar {
        gap: var(--s-4);
    }

    .cat-tabs__tab {
        font-size: var(--t-base);
    }
}

.cat-tabs__tab:hover {
    color: var(--c-text-strong);
}

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

.cat-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);
}

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

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

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

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

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

/* With the tab bar there, the panel's own heading would say it twice. */
.cat-tabs[data-ready] .cat-tabs__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

.cat-desc__body {
    font-size: var(--t-base);
}

.cat-video {
    margin: 0;
}

/* --- specs table ---------------------------------------------------------- */

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

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

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

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

.cat-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);
}

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

.cat-specs tbody tr:not(.cat-specs__group):hover {
    background: var(--c-surface-sunk);
}

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

/* --- documents ------------------------------------------------------------ */

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

/* --- entry blocks, related ------------------------------------------------ */

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

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

/* ==========================================================================
   Blocks
   ========================================================================== */

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