/*----------------------------------------*/
/*  PRODUCT CATEGORY                       */
/*  Figma: Categories (node 482-13063)     */
/*  White filter column on the left; the   */
/*  banner, series headings and product    */
/*  grid on the light ground to the right. */
/*----------------------------------------*/

/* Every selector is scoped to the category archive: the same .ctg__*,
   .prd__* and .checkbox-entry blocks also serve My Projects, the application
   page and the basket, and product-style.css (loaded later) must keep
   styling those. The extra `body.tax-product_cat` also outranks it here. */

body.tax-product_cat {
    --pc-side-w: 342px;
    --pc-line: rgba(32, 32, 32, .1);
    --pc-grid-cols: 6;
}

body.tax-product_cat .category-section,
body.tax-product_cat .category-section * {
    font-family: var(--rd-ff);
}


/*--------------------*/
/* - LAYOUT           */
/*--------------------*/
body.tax-product_cat .category-section {
    display: flex;
    align-items: stretch;
    background-color: var(--rd-surface);
}

/* The form is the flex child that stretches to the full height of the page,
   so it carries the white column; the menu inside it pins itself on scroll. */
body.tax-product_cat .category-section > .js-filter {
    flex: 0 0 var(--pc-side-w);
    width: var(--pc-side-w);
    background-color: var(--rd-white);
    border-bottom-right-radius: 12px;
}

body.tax-product_cat .category-section-left {
    width: 100%;
}

body.tax-product_cat .category-section-right {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 30px var(--rd-gutter) 80px 30px;
    background-color: var(--rd-surface) !important;
}

/* the column's own wrappers drop Bootstrap's centred, narrowed grid */
body.tax-product_cat .category-section-right .section .container {
    max-width: none;
    width: 100%;
    padding: 0;
}

body.tax-product_cat .category-section-right .section .row.justify-content-center {
    display: block;
    margin: 0;
}

body.tax-product_cat .category-section-right .section .col-xxl-10 {
    width: 100%;
    max-width: none;
    padding: 0;
}


/*--------------------*/
/* - FILTER COLUMN    */
/*--------------------*/
/* Pinned under the header while the product list scrolls, the way the live
   site does it: global.js adds `.fixed` on desktop once the column reaches the
   header. position:sticky can't be used here — #content-block and body both
   set overflow:hidden, which switches sticky off. */
body.tax-product_cat .ctg__menu--wrap {
    position: relative;
    height: auto;
    overflow: visible;
}

@media (min-width: 1200px) {
    body.tax-product_cat .ctg__menu--wrap.fixed {
        position: fixed;
        /* under the footer (z-index 2), so the footer slides over it at the end */
        z-index: 1;
        top: var(--rd-hdr-stick);
        left: 0;
        width: var(--pc-side-w);
        height: calc(100vh - var(--rd-hdr-stick));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

body.tax-product_cat .ctg__menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    background: none;
}

body.tax-product_cat .ctg__menu > * {
    margin: 0;
}

body.tax-product_cat .ctg__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.tax-product_cat .ctg__links--caption {
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
}

body.tax-product_cat .ctg__links--caption + .ctg__dropdown,
body.tax-product_cat .ctg__dropdown + .ctg__links--list {
    margin-top: 0;
}


/* - category switcher - */
body.tax-product_cat .ctg__dropdown--title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 54px;
    padding: 0 20px;
    background-color: var(--rd-accent);
    border: 0;
    border-radius: var(--rd-radius);
}

body.tax-product_cat .ctg__dropdown--title b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
}

body.tax-product_cat .ctg__dropdown--title i {
    width: 20px;
    height: 20px;
    background: url("../../img/redesign/icons/arrow-cta-dark.svg") no-repeat center / contain;
    transform: rotate(90deg);
}

body.tax-product_cat .ctg__dropdown--title i::before {
    content: none;
}

body.tax-product_cat .ctg__dropdown.active .ctg__dropdown--title i {
    transform: rotate(-90deg);
}

body.tax-product_cat .ctg__dropdown--list {
    top: calc(100% + 6px);
    bottom: auto;
    max-height: 320px;
    padding: 6px 0;
    background: var(--rd-white);
    border: 1px solid var(--pc-line);
    border-radius: var(--rd-radius);
    box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
    transform: none;
}

body.tax-product_cat .ctg__dropdown--list li > * {
    padding: 10px 20px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    background: none;
}


/* - sub-categories - */
body.tax-product_cat .ctg__links > .ctg__links--list {
    padding: 12px 20px;
}

body.tax-product_cat .ctg__links--list li {
    margin: 0;
}

body.tax-product_cat .ctg__links--list .ctg__links--list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

body.tax-product_cat .ctg__links--list li > *:not(ul) {
    padding: 0;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light-muted);
    background: none;
    border-radius: 0;
}

/* "All …" counts as current when no sub-category is */
body.tax-product_cat .ctg__links--list li > *:not(ul).active,
body.tax-product_cat .ctg__links > .ctg__links--list > li > a:not(:has(~ ul a.active)) {
    color: var(--rd-accent);
    background: none;
}

body.tax-product_cat .ctg__links--list li > *:not(ul).active::before {
    content: none;
}


/* - attribute filters - */
body.tax-product_cat .ctg__filter {
    padding-top: 16px;
    border-top: 1px solid var(--pc-line);
    border-bottom: 0;
}

body.tax-product_cat .ctg__filter--title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

body.tax-product_cat .ctg__filter--title b {
    font-size: 18px;
    line-height: normal;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
}

/* plus when closed, minus when open — the vertical bar turns flat */
body.tax-product_cat .ctg__filter--title i {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

body.tax-product_cat .ctg__filter--title i::before,
body.tax-product_cat .ctg__filter--title i::after {
    background: var(--rd-txt-on-light);
}

body.tax-product_cat .ctg__filter--list {
    padding: 12px 20px 0;
}

body.tax-product_cat .ctg__filter--list li {
    padding: 0;
}

body.tax-product_cat .ctg__filter--list li + li {
    margin-top: 12px;
}


/* - checkboxes - */
body.tax-product_cat .ctg__filter--list .checkbox-entry {
    min-height: 18px;
    margin: 0;
}

body.tax-product_cat .ctg__filter--list .checkbox-entry span {
    padding-left: 30px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    color: var(--rd-txt-on-light-muted);
}

body.tax-product_cat .ctg__filter--list .checkbox-entry span::before {
    width: 18px;
    height: 18px;
    border: 1px solid var(--pc-line);
    border-radius: 2px;
    background-color: var(--rd-white);
}

body.tax-product_cat .ctg__filter--list .checkbox-entry input[type=checkbox]:checked + span::before {
    border-color: var(--rd-accent);
    background-color: var(--rd-accent);
}

body.tax-product_cat .ctg__filter--list .checkbox-entry input[type=checkbox]:checked + span {
    color: var(--rd-txt-on-light);
}


/* - reset - */
body.tax-product_cat .ctg__menu .js_clear_product_filter {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    min-width: 0;
    margin-top: 8px;
    padding: 0 20px;
    background: none;
    border: 1px solid var(--rd-border-on-light);
    border-radius: var(--rd-radius);
}

body.tax-product_cat .ctg__menu .js_clear_product_filter b {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
}

@media (min-width: 1200px) {
    body.tax-product_cat .ctg__dropdown--list li > *:hover,
    body.tax-product_cat .ctg__links--list li > *:not(ul):not(.active):hover {
        color: var(--rd-accent);
        background: none;
    }

    body.tax-product_cat .ctg__menu .js_clear_product_filter:hover {
        border-color: var(--rd-txt-on-light);
    }
}


/*--------------------*/
/* - BANNER           */
/*--------------------*/
/* dark plate under the photo, as in the design — a category without a banner
   image keeps the white panel text readable instead of showing on white */
/* min-height, not height: a long description grows the plate instead of
   being cut off by it */
body.tax-product_cat .prd__banner {
    height: auto;
    min-height: 391px;
    background-color: var(--rd-dark);
    border-radius: var(--rd-radius);
    overflow: hidden;
}

/* style.css pins the small banner at 250px with !important */
body.tax-product_cat .banner-entry.small.prd__banner .banner-entry-align {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: auto !important;
    min-height: 391px;
    padding: 20px;
}

/* the design lets the photo speak; the panel carries the contrast instead */
body.tax-product_cat .banner-entry.small.prd__banner .banner-entry-align::before {
    content: none;
}

body.tax-product_cat .prd__banner .banner-entry-align .container,
body.tax-product_cat .prd__banner .banner-entry-align .row {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.tax-product_cat .prd__banner .banner-entry-align .row {
    display: block;
}

/* glass panel */
body.tax-product_cat .prd__banner .banner-entry-align .row > [class*="col-"] {
    width: auto;
    max-width: 647px;
    margin: 0;
    padding: 20px;
    text-align: left;
    background-color: var(--rd-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--rd-radius);
}

/* parent category, kept as a quiet breadcrumb above the title */
body.tax-product_cat .prd__banner .h6.grey-300.m-0 {
    margin: 0 0 8px !important;
    font-size: 16px;
    line-height: 1.2;
    color: var(--rd-txt-faded);
}

body.tax-product_cat .prd__banner .h6.grey-300.m-0 b {
    font-weight: 400;
}

body.tax-product_cat .prd__banner .title {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 400;
    color: var(--rd-white);
    text-align: left;
    text-transform: none;
}

body.tax-product_cat .prd__banner .h6.fw-400 {
    max-width: 611px;
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
    color: var(--rd-txt-muted);
}

body.tax-product_cat .prd__banner .h6.fw-400:empty {
    display: none;
}

body.tax-product_cat .category-section-right > .section > .spacer-sm {
    height: 30px;
}


/*--------------------*/
/* - SERIES           */
/*--------------------*/
body.tax-product_cat .prd__title--wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

body.tax-product_cat .prd__title--wrap .title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

body.tax-product_cat .prd__title--count {
    margin-left: auto;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light-muted);
}

body.tax-product_cat .prd__title--count b {
    font-weight: 400;
}

/* top-level categories link through to the full series list */
body.tax-product_cat .prd__title--wrap .simple-link b {
    font-size: 18px;
    font-weight: 500;
    color: var(--rd-txt-on-light);
    text-decoration: underline;
}

body.tax-product_cat .bottom-line {
    height: 1px;
    margin-top: 40px;
    background: var(--pc-line);
}

body.tax-product_cat #js_products_content > .section > .spacer-sm {
    height: 40px;
}


/*--------------------*/
/* - PRODUCT GRID     */
/*--------------------*/
body.tax-product_cat .prd__row {
    display: grid;
    grid-template-columns: repeat(var(--pc-grid-cols), minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}

body.tax-product_cat .prd__row > .prd_item {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.tax-product_cat .prd__item.type2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 100%;
    margin: 0;
    padding: 16px;
    background: var(--rd-white);
    border: 0;
    border-radius: var(--rd-radius);
}

body.tax-product_cat .prd__item.type2::before {
    content: none;
}

body.tax-product_cat .prd__item.type2 .prd__item--img {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 175 / 146;
    margin: 0;
}

body.tax-product_cat .prd__item.type2 .prd__item--img img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    transform: none;
}

/* the design's caption slot: 44px, two lines, then an ellipsis */
body.tax-product_cat .prd__item.type2 .prd__item--name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    height: 44px;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-align: center;
}

/* the design's card carries the name only — the series is already the heading
   above the grid, and the whole card is the link */
body.tax-product_cat .prd__item.type2 .prd__item--descr,
body.tax-product_cat .prd__item.type2 .prd__item--view {
    display: none;
}

/* New / Most Popular — not drawn in the design, kept as a quiet chip */
body.tax-product_cat .prd__item--label {
    z-index: 1;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--rd-surface);
    border-radius: 4px;
}

body.tax-product_cat .prd__item--label img {
    width: 14px;
    height: auto;
}

body.tax-product_cat .prd__item--label b {
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: var(--rd-txt-on-light);
}

/* - load more (js/redesign/product-category.js) - */
/* without JS every card shows; the script collapses the grid to one row */
body.tax-product_cat .prd__row > .prd_item {
    display: block;
}

body.tax-product_cat .prd__row.is-collapsed > .prd_item.is-extra {
    display: none;
}

body.tax-product_cat .prd__row > .prd_item.is-revealed {
    animation: pc-card-in .45s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes pc-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

body.tax-product_cat .pc-more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    transition: opacity .25s ease, transform .25s ease;
}

body.tax-product_cat .pc-more[hidden] {
    display: none;
}

body.tax-product_cat .pc-more.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

body.tax-product_cat .pc-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 24px;
    background: var(--rd-white);
    border: 1px solid var(--rd-border-on-light);
    border-radius: var(--rd-radius);
    cursor: pointer;
    font-family: var(--rd-ff);
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    color: var(--rd-txt-on-light);
    transition: background-color var(--rd-transition), border-color var(--rd-transition), color var(--rd-transition);
}

body.tax-product_cat .pc-more__count {
    font-weight: 400;
    color: var(--rd-txt-on-light-muted);
}

body.tax-product_cat .pc-more__btn i {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    background: url("../../img/redesign/icons/arrow-cta-dark.svg") no-repeat center / contain;
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    body.tax-product_cat .prd__row > .prd_item.is-revealed {
        animation: none;
    }
}

@media (min-width: 1200px) {
    body.tax-product_cat .prd__item.type2 {
        transition: box-shadow var(--rd-transition);
    }

    body.tax-product_cat .prd__item.type2:hover {
        box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
    }

    body.tax-product_cat .pc-more__btn:hover {
        background-color: var(--rd-txt-on-light);
        border-color: var(--rd-txt-on-light);
        color: var(--rd-white);
    }

    body.tax-product_cat .pc-more__btn:hover .pc-more__count {
        color: var(--rd-txt-muted);
    }

    body.tax-product_cat .pc-more__btn:hover i {
        background-image: url("../../img/redesign/icons/arrow-cta.svg");
    }
}


/*--------------------*/
/* - ACCESSORIES      */
/*--------------------*/
/* Not drawn in the category design; built like the home page's Latest
   Products slider: white tiles, arrows on the left, progress pills right. */
body.tax-product_cat .accessories-title {
    margin: 0 0 30px;
    padding: 0;
    border: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

body.tax-product_cat .accessories-slider .swiper-slide {
    height: auto;
}

body.tax-product_cat .accessories-slider .prd__item.type3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 16px;
    background: var(--rd-white);
    border: 0;
    border-radius: var(--rd-radius);
}

body.tax-product_cat .accessories-slider .prd__item.type3 .prd__item--img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 175 / 146;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 4px;
}

body.tax-product_cat .accessories-slider .prd__item.type3 .prd__item--img img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    transform: none;
}

body.tax-product_cat .accessories-slider .prd__item.type3 .prd__item--name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    height: 44px;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-align: center;
}

body.tax-product_cat .accessories-slider .prd__item.type3 .prd__item--descr {
    display: none;
}

/* - controls - */
body.tax-product_cat .accessories-slider .swiper-controls-wrapp {
    margin: 40px 0 0;
}

body.tax-product_cat .accessories-slider .swiper-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
}

body.tax-product_cat .accessories-slider .swiper-controls > *:not(:last-child) {
    margin-right: 0;
}

/* product-style.css hangs these off the sides of the slider (top 75px,
   left/right −25px) */
body.tax-product_cat .accessories-slider .swiper-button-prev,
body.tax-product_cat .accessories-slider .swiper-button-next {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 54px;
    height: 54px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--rd-radius);
    transition: background-color var(--rd-transition), border-color var(--rd-transition);
}

body.tax-product_cat .accessories-slider .swiper-button-prev {
    order: 1;
    border-color: rgba(0, 0, 0, .06);
    background-color: transparent;
    transform: rotate(180deg);
}

body.tax-product_cat .accessories-slider .swiper-button-next {
    order: 2;
    background-color: var(--rd-white);
    transform: none;
}

body.tax-product_cat .accessories-slider .swiper-button-prev i,
body.tax-product_cat .accessories-slider .swiper-button-next i {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
}

body.tax-product_cat .accessories-slider .swiper-button-prev i {
    background: url("../../img/redesign/icons/arrow-cta-dark.svg") no-repeat center / 20px 20px;
}

body.tax-product_cat .accessories-slider .swiper-button-next i {
    background: url("../../img/redesign/icons/arrow-cta-accent.svg") no-repeat center / 20px 20px;
}

body.tax-product_cat .accessories-slider .swiper-button-prev i::before,
body.tax-product_cat .accessories-slider .swiper-button-next i::before,
body.tax-product_cat .accessories-slider .swiper-button-prev i::after,
body.tax-product_cat .accessories-slider .swiper-button-next i::after {
    content: none;
}

/* the slide range has an end — say so instead of leaving a live-looking button */
body.tax-product_cat .accessories-slider .swiper-button-disabled {
    opacity: .4;
    pointer-events: none;
}

/* - progress pills - */
body.tax-product_cat .accessories-slider .swiper-controls .swiper-pagination {
    position: static;
    order: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: auto !important;
    margin: 0 0 0 auto;
    transform: none !important;
}

/* style.css pins the bullet margin with !important; dynamic bullets also scale
   and slide them — the design keeps every pill the same size, in place */
body.tax-product_cat .accessories-slider .swiper-pagination-bullet {
    width: 64px;
    height: 4px;
    margin: 0 !important;
    border: 0;
    border-radius: 12px;
    background: var(--rd-line-on-light);
    opacity: 1;
    transform: none !important;
    left: auto !important;
    transition: width var(--rd-transition), background-color var(--rd-transition);
}

body.tax-product_cat .accessories-slider .swiper-pagination-bullet-active,
body.tax-product_cat .accessories-slider .swiper-pagination-bullet-active-main {
    width: 120px;
    background: var(--rd-accent);
}

@media (min-width: 1200px) {
    body.tax-product_cat .accessories-slider .prd__item.type3 {
        transition: box-shadow var(--rd-transition);
    }

    body.tax-product_cat .accessories-slider .prd__item.type3:hover {
        box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
    }

    body.tax-product_cat .accessories-slider .swiper-button-prev:hover {
        border-color: var(--rd-border-on-light);
    }

    body.tax-product_cat .accessories-slider .swiper-button-next:hover {
        background-color: var(--rd-txt-on-light);
    }

    body.tax-product_cat .accessories-slider .swiper-pagination-bullet:hover {
        background: var(--rd-border-on-light);
    }
}


/*--------------------------------*/
/* - NARROWER DESKTOPS            */
/*--------------------------------*/
@media (max-width: 1699px) {
    body.tax-product_cat {
        --pc-grid-cols: 5;
    }
}

@media (max-width: 1440px) {
    body.tax-product_cat {
        --pc-side-w: 300px;
        --pc-grid-cols: 4;
    }

    body.tax-product_cat .ctg__menu {
        padding: 24px;
    }
}


/*--------------------*/
/* - TABLET (<1200px) */
/*--------------------*/
@media (max-width: 1199px) {
    body.tax-product_cat .category-section {
        display: block;
    }

    body.tax-product_cat .category-section > .js-filter,
    body.tax-product_cat .category-section-left {
        width: auto;
        background: none;
        border-radius: 0;
    }

    body.tax-product_cat .category-section-right {
        padding: 24px var(--rd-gutter) 60px;
    }

    /* the filter becomes the off-canvas panel product-global.js opens */
    body.tax-product_cat .ctg__menu--wrap {
        position: fixed;
        top: var(--rd-hdr-stick);
        width: min(var(--pc-side-w), 88%);
        height: calc(100% - var(--rd-hdr-stick));
        max-height: none;
        /* the base rule sets overflow:visible for the desktop column; the
           panel is taller than a phone screen, so it scrolls on its own
           (the page behind is locked by html.ctg-open-filter) */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        background-color: var(--rd-white);
    }

    /* Close bar: stays at the top of the panel while the filters scroll, with
       the same dark 40px square as the burger it sits beside. main.css draws
       the cross on this element, so the bars are moved onto the square. */
    body.tax-product_cat .ctg__menu--wrap .btn-close {
        position: sticky;
        z-index: 11;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        height: auto;
        margin: 0;
        padding: 14px 24px;
        background: var(--rd-white);
        border: 0;
        border-bottom: 1px solid var(--pc-line);
        border-radius: 0;
    }

    body.tax-product_cat .ctg__menu--wrap .btn-close b {
        position: relative;
        z-index: 0;
        top: auto;
        right: auto;
        display: flex;
        align-items: center;
        gap: 12px;
        transform: none;
        font-size: 18px;
        line-height: 1;
        font-weight: 500;
        letter-spacing: 0;
        color: var(--rd-txt-on-light);
    }

    body.tax-product_cat .ctg__menu--wrap .btn-close b::after {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        background-color: var(--rd-dark);
        border-radius: var(--rd-radius);
    }

    body.tax-product_cat .ctg__menu--wrap .btn-close::before,
    body.tax-product_cat .ctg__menu--wrap .btn-close::after {
        z-index: 1;
        left: auto;
        right: 44px;
        width: 16px;
        background-color: var(--rd-white);
        transform: translate(50%, -50%) rotate(45deg);
    }

    body.tax-product_cat .ctg__menu--wrap .btn-close::after {
        transform: translate(50%, -50%) rotate(-45deg);
    }

    body.tax-product_cat .ctg__menu--wrap .btn-close:hover {
        background: var(--rd-white);
    }

    body.tax-product_cat .ctg__menu--wrap .btn-close:hover::before,
    body.tax-product_cat .ctg__menu--wrap .btn-close:hover::after {
        background-color: var(--rd-white);
    }

    /* the menu starts right under the bar */
    body.tax-product_cat .ctg__menu--wrap .ctg__menu {
        padding-top: 24px;
    }

    body.tax-product_cat .ctg__menu--overlay {
        top: var(--rd-hdr-stick);
        background-color: var(--rd-dark);
    }

    body.tax-product_cat.ctg-open-filter .ctg__menu--overlay,
    html.ctg-open-filter body.tax-product_cat .ctg__menu--overlay {
        opacity: .5;
    }

    /* "Show Filter" */
    body.tax-product_cat .ctg__mobile--section {
        height: 46px;
        margin: 0 0 24px;
    }

    body.tax-product_cat .ctg__mobile--block .container {
        max-width: none;
        padding: 0;
    }

    body.tax-product_cat .ctg__mobile--block.fixed {
        top: var(--rd-hdr-stick);
        padding: 8px var(--rd-gutter);
        background-color: var(--rd-white);
        box-shadow: 0 8px 24px rgba(32, 32, 32, .08);
    }

    body.tax-product_cat .ctg__mobile--btn {
        height: 46px;
        max-width: none;
        padding: 0 20px;
        background: var(--rd-white);
        border: 1px solid var(--rd-border-on-light);
        border-radius: var(--rd-radius);
    }

    body.tax-product_cat .ctg__mobile--btn svg {
        width: 22px;
    }

    body.tax-product_cat .ctg__mobile--btn svg path {
        stroke: var(--rd-txt-on-light);
    }

    body.tax-product_cat .ctg__mobile--btn b {
        font-size: 18px;
        font-weight: 500;
        color: var(--rd-txt-on-light);
    }

    body.tax-product_cat .prd__banner,
    body.tax-product_cat .banner-entry.small.prd__banner .banner-entry-align {
        height: auto !important;
        min-height: 300px;
    }
}

@media (max-width: 991px) {
    body.tax-product_cat {
        --pc-grid-cols: 3;
    }
}


/*--------------------*/
/* - PHONE (<768px)   */
/*--------------------*/
@media (max-width: 767px) {
    body.tax-product_cat {
        --pc-grid-cols: 2;
    }

    body.tax-product_cat .prd__row {
        gap: 12px;
    }

    body.tax-product_cat .prd__item.type2 {
        gap: 12px;
        padding: 12px;
    }

    body.tax-product_cat .prd__item.type2 .prd__item--name {
        height: 38px;
        font-size: 16px;
    }

    body.tax-product_cat .accessories-slider .prd__item.type3 {
        gap: 12px;
        padding: 12px;
    }

    body.tax-product_cat .accessories-slider .prd__item.type3 .prd__item--name {
        height: 38px;
        font-size: 16px;
    }

    body.tax-product_cat .accessories-title {
        margin-bottom: 20px;
        font-size: 24px;
    }

    body.tax-product_cat .accessories-slider .swiper-controls-wrapp {
        margin-top: 24px;
    }

    body.tax-product_cat .accessories-slider .swiper-button-prev,
    body.tax-product_cat .accessories-slider .swiper-button-next {
        width: 46px;
        height: 46px;
    }

    /* the pills don't fit beside the arrows here — same call as the home page */
    body.tax-product_cat .accessories-slider .swiper-controls .swiper-pagination {
        display: none;
    }

    body.tax-product_cat .prd__banner,
    body.tax-product_cat .banner-entry.small.prd__banner .banner-entry-align {
        height: auto !important;
        min-height: 260px;
    }

    body.tax-product_cat .banner-entry.small.prd__banner .banner-entry-align {
        padding: 12px;
    }

    body.tax-product_cat .prd__banner .banner-entry-align .row > [class*="col-"] {
        padding: 16px;
    }

    body.tax-product_cat .prd__banner .title,
    body.tax-product_cat .prd__title--wrap .title {
        font-size: 24px;
    }

    body.tax-product_cat .prd__banner .h6.fw-400 {
        margin-top: 12px;
        font-size: 16px;
    }

    /* heading over the count once the row gets tight */
    body.tax-product_cat .prd__title--wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 20px;
    }

    body.tax-product_cat .prd__title--count {
        margin-left: 0;
        font-size: 16px;
        text-align: left;
    }
}


/*--------------------*/
/* - SERIES PAGE      */
/*--------------------*/
/* The lowest category level (e.g. /serie/interior/high-bay/hbm-series/)
   renders without the filter column: include/product-category/*-v2.php and
   info-section.php, each section marked .pc-series. Same banner, tiles and
   accessories slider as the category page, across the full gutter width. */
body.tax-product_cat main:has(> .pc-series) {
    padding-bottom: var(--in-section, clamp(80px, 7.3vw, 140px));
    background-color: var(--rd-surface);
}

body.tax-product_cat .pc-series,
body.tax-product_cat .pc-series * {
    font-family: var(--rd-ff);
}

body.tax-product_cat .pc-series {
    padding: 0 var(--rd-gutter);
    background-color: var(--rd-surface) !important;
}

body.tax-product_cat .pc-series + .pc-series {
    margin-top: clamp(40px, 3.1vw, 60px);
}

body.tax-product_cat .pc-series > .container {
    max-width: none;
    width: 100%;
    padding: 0;
}

body.tax-product_cat .pc-series > .container > .row {
    margin: 0;
}

body.tax-product_cat .pc-series > .container > .row > [class*="col-"] {
    padding: 0;
}

body.tax-product_cat .pc-series > .spacer-md,
body.tax-product_cat .pc-series > .spacer-xs {
    display: none;
}

/* banner: inset card like the category banner, Back on it */
body.tax-product_cat .pc-series-head {
    padding-top: 30px;
}

body.tax-product_cat .pc-series-head .prd__banner {
    position: relative;
    border-radius: var(--rd-radius);
    overflow: hidden;
}

body.tax-product_cat .pc-series-head .banner-entry-shadow {
    display: none;
}

body.tax-product_cat .pc-series-head .btn-back-container {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
}

body.tax-product_cat .pc-series-head .btn-back {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    padding: 0 16px 0 0;
    background-color: var(--rd-white);
    border: 0;
    border-radius: var(--rd-radius);
}

body.tax-product_cat .pc-series-head .btn-back i {
    position: static;
    width: 46px;
    height: 46px;
    background: url("../../img/redesign/icons/arrow-cta-dark.svg") no-repeat center / 20px 20px;
    border: 0;
    transform: rotate(180deg);
}

body.tax-product_cat .pc-series-head .btn-back i::before,
body.tax-product_cat .pc-series-head .btn-back i::after {
    content: none;
}

body.tax-product_cat .pc-series-head .btn-back b {
    margin: 0;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    text-transform: uppercase;
}

/* series description card */
body.tax-product_cat .pc-series .series-descr {
    display: flex;
    align-items: center;
    gap: clamp(30px, 5.2vw, 100px);
    padding: 30px;
    background-color: var(--rd-white);
    border-radius: var(--rd-radius);
}

body.tax-product_cat .pc-series .series-descr__info {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

body.tax-product_cat .pc-series .series-descr__info .text {
    font-size: 18px;
    line-height: 1.5;
    color: var(--rd-txt-on-light-muted);
}

body.tax-product_cat .pc-series .series-descr__info .text > br {
    display: none;
}

body.tax-product_cat .pc-series .series-descr__info .text h5 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rd-accent);
}

body.tax-product_cat .pc-series .series-descr__info .text h2 {
    margin: 0 0 16px;
    font-size: clamp(34px, 2.7vw, 52px);
    line-height: 1;
    font-weight: 300;
    color: var(--rd-txt-on-light);
}

body.tax-product_cat .pc-series .series-descr__img {
    flex: 0 0 clamp(220px, 25%, 420px);
    width: auto;
    margin: 0;
}

body.tax-product_cat .pc-series .series-descr__img:empty {
    display: none;
}

body.tax-product_cat .pc-series .series-descr__img img {
    width: 100%;
    height: auto;
    border-radius: var(--rd-radius);
}

@media (max-width: 1199px) {
    body.tax-product_cat .pc-series-head {
        padding-top: 20px;
    }
}

@media (max-width: 767px) {
    body.tax-product_cat .pc-series-head {
        padding-top: 15px;
    }

    body.tax-product_cat .pc-series-head .btn-back-container {
        top: 12px;
        left: 12px;
    }

    body.tax-product_cat .pc-series-head .btn-back i {
        width: 40px;
        height: 40px;
    }

    body.tax-product_cat .pc-series .series-descr {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }

    body.tax-product_cat .pc-series .series-descr__img {
        flex-basis: auto;
    }
}

/* series banner: the description (.h3) can run long — the photo covers the
   whole plate however tall it gets, and the panel clears the Back button */
body.tax-product_cat .pc-series-head .prd__banner .banner-entry-bg {
    position: absolute;
    inset: 0;
    display: block;
    height: auto;
    padding: 0;
    background-size: cover;
    background-position: center;
}

body.tax-product_cat .pc-series-head .prd__banner .banner-entry-content {
    position: relative;
    z-index: 1;
}

body.tax-product_cat .pc-series-head .banner-entry.small.prd__banner .banner-entry-align {
    padding: 86px 20px 20px;
}

body.tax-product_cat .pc-series-head .prd__banner .h3 {
    max-width: 725px;
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-txt-muted);
    text-transform: none;
}

body.tax-product_cat .pc-series-head .prd__banner .h3 p + p {
    margin-top: 10px;
}

@media (max-width: 767px) {
    body.tax-product_cat .pc-series-head .banner-entry.small.prd__banner .banner-entry-align {
        padding: 68px 12px 12px;
    }

    body.tax-product_cat .pc-series-head .prd__banner .h3 {
        font-size: 16px;
    }
}