.dn-woo-product-section {
    --dn-section-filter-gap: 18px;
    --dn-section-filter-column-gap: 36px;
    --dn-section-row-gap: 30px;
    --dn-section-column-gap: clamp(20px, 2.4vw, 34px);
    width: 100%;
}

.dn-woo-product-section__header {
    margin-bottom: 22px;
}

.dn-woo-product-section__title {
    margin: 0 0 8px;
}

.dn-woo-product-section__description {
    max-width: 720px;
}

.dn-woo-product-section__description p {
    margin: 0;
}

.dn-woo-product-section__group-list,
.dn-woo-product-section__child-list {
    display: grid;
    gap: clamp(56px, 7vw, 104px);
}

.dn-woo-product-section__intro {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: var(----gap30-80, clamp(30px, 5vw, 80px));
    row-gap: var(----gap20-40, clamp(20px, 3vw, 40px));
    margin-bottom: 28px;
}

.dn-woo-product-section__intro--root {
    width: var(--theme-container-width, calc(100% - 40px));
    max-width: var(--theme-normal-container-max-width, 100%);
    margin-right: auto;
    margin-left: auto;
}

.dn-woo-product-section__intro-title {
    margin: 0;
    width: 100%;
    max-width: 707px;
    font-size: var(--fs38-48, clamp(38px, 3.1vw, 48px));
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.dn-woo-product-section__intro-description {
    width: 100%;
    max-width: 402px;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.dn-woo-product-section__intro-description p {
    margin: 0;
}

.dn-woo-product-section__intro--child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: var(----gap30-80, clamp(30px, 5vw, 80px));
    row-gap: var(----gap20-40, clamp(20px, 3vw, 40px));
    width: auto;
    max-width: none;
    margin-bottom: 22px;
}

/* No max-width here: the row already keeps the copy off the button with its
   column-gap, and the "View More" button is flex: 0 0 auto, so the copy simply
   takes the rest of the row. A fixed cap only made long headings wrap early. */
.dn-woo-product-section__intro-copy {
    width: 100%;
    min-width: 0;
}

.dn-woo-product-section__intro-actions {
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    align-items: flex-end;
    justify-content: flex-end;
}

.dn-woo-product-section__intro--child .dn-woo-product-section__intro-title {
    width: 100%;
    max-width: none;
    margin-bottom: 10px;
    font-size: var(--fs32-38, clamp(2rem, calc(0.7059vw + 1.7891rem), 2.375rem));
}

.dn-woo-product-section__intro--child .dn-woo-product-section__intro-description {
    width: 100%;
    max-width: none;
    margin: 0;
}

.dn-woo-product-section__intro-link {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    width: fit-content;
    padding: var(--dn-tab-padding-y, 12px) var(--dn-tab-padding-x, 20px);
    border: var(--dn-tab-border-width, 0) solid var(--dn-tab-border-color, transparent);
    border-radius: var(--dn-tab-border-radius, 100px);
    color: var(--dn-section-filter-text-color, var(--dn-tab-text-color, #ffffff));
    background: var(--dn-tab-bg-color, #111111);
    font: inherit;
    font-size: var(--dn-section-filter-font-size, var(--dn-tab-font-size, 16px));
    font-weight: var(--dn-section-filter-font-weight, var(--dn-tab-font-weight, inherit));
    line-height: 1.5;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.dn-woo-product-section__intro-link:hover,
.dn-woo-product-section__intro-link:focus-visible {
    color: var(--dn-section-filter-hover-text-color, var(--dn-tab-hover-text-color, var(--dn-tab-active-text-color, #ffffff)));
    border-color: var(--dn-section-filter-hover-border-color, var(--dn-tab-hover-border-color, var(--dn-tab-active-border-color, transparent)));
    background: var(--dn-tab-hover-bg-color, var(--dn-tab-active-bg-color, var(--wp--preset--color--palette-color-1, var(--theme-palette-color-1, #8ed8f8))));
}

.dn-woo-product-section__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--dn-section-filter-gap) var(--dn-section-filter-column-gap);
    margin-bottom: 28px;
}

.dn-woo-product-section__filter {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

/* Cascading filters: options / whole facets with no products in the current
   context are hidden so the remaining choices always reflect what's shown. */
.dn-woo-product-section__filter.dn-woo-filter-hidden,
.dn-woo-product-section__filter-item.dn-woo-filter-hidden {
    display: none !important;
}

.dn-woo-product-section__filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--dn-section-filter-button-gap, 14px);
    min-width: 0;
    min-height: 0;
    padding: 0 0 var(--dn-section-filter-padding-bottom, 9px);
    color: var(--dn-section-filter-text-color, var(--theme-text-color, #111));
    font: inherit;
    font-size: var(--dn-section-filter-font-size, 16px);
    font-weight: var(--dn-section-filter-font-weight, 400);
    line-height: 1.2;
    border-radius: 0;
    border: 0;
    border-bottom: var(--dn-section-filter-border-width, 1px) solid var(--dn-section-filter-border-color, rgba(17, 17, 17, 0.64));
    background: transparent;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.dn-woo-product-section__filter-toggle:hover,
.dn-woo-product-section__filter-toggle:focus-visible,
.dn-woo-product-section__filter-toggle.is-active {
    border-bottom-color: var(--dn-section-filter-hover-border-color, rgba(17, 17, 17, 0.86));
    color: var(--dn-section-filter-hover-text-color, var(--theme-link-hover-color, var(--theme-text-color, #111)));
}

.dn-woo-product-section__filter.is-open .dn-woo-product-section__filter-toggle {
    border-bottom-color: var(--dn-section-filter-active-border-color, #8ed8f8);
}

.dn-woo-product-section__filter-toggle:focus-visible {
    outline: 2px solid rgba(142, 216, 248, 0.48);
    outline-offset: 4px;
}

.dn-woo-product-section .dn-tanc-filter-dropdown__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(0) rotate(45deg);
    transition: transform 0.18s ease;
}

.dn-woo-product-section__filter.is-open .dn-tanc-filter-dropdown__chevron {
    transform: translateY(2px) rotate(225deg);
}

.dn-woo-product-section__filter-panel {
    position: absolute;
    z-index: 35;
    top: calc(100% + 12px);
    inset-inline-start: 0;
    min-width: min(280px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(380px, calc(100vh - 160px));
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.dn-woo-product-section__filter-panel[hidden] {
    display: none !important;
}

/* On a phone the panel is wider than the button it hangs off, so a button on
   the right of the row pushed it past the edge of the screen. Measure the panel
   against the whole filter row instead of the single button, so it always lands
   inside the viewport whichever filter is opened. */
@media (max-width: 767.98px) {
    .dn-woo-product-section__filters {
        position: relative;
    }

    .dn-woo-product-section__filter {
        position: static;
    }

    .dn-woo-product-section__filter-panel {
        inset-inline: 0;
        min-width: 0;
        max-width: none;
    }
}

.dn-woo-product-section__filter.is-open .dn-woo-product-section__filter-panel {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Colour facets render round swatches whose name shows in a tooltip ABOVE the
   swatch on hover. The panel scrolls (overflow), which clips that tooltip on the
   top row. Reserve room at the top of colour panels so the first row's tooltip
   is fully visible. Scoped to colour swatch panels (via :has) so the size/
   category panels, which have no hover tooltip, don't gain dead space. */
.dn-woo-product-section__filter-panel:has([data-swatches-type="color"]) {
    padding-top: 40px;
}

.dn-woo-product-section__filter-list {
    margin: 0;
    padding: 0;
}

.dn-woo-product-section__filter-list .ct-filter-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dn-woo-product-section__filter-panel .ct-filter-item-inner a {
    pointer-events: auto;
    text-decoration: none;
}

.dn-woo-product-section__filter-panel .ct-filter-item-inner a .ct-checkbox {
    pointer-events: none;
}

.dn-woo-product-section__products {
    position: relative;
}

.dn-woo-product-section.is-loading .dn-woo-product-section__products {
    opacity: 0.45;
    pointer-events: none;
}

.dn-woo-product-section .dn-woo-product-section__grid[data-products] {
    display: grid;
    grid-template-columns: repeat(var(--dn-section-desktop-columns), minmax(0, 1fr));
    gap: var(--dn-section-row-gap) var(--dn-section-column-gap);
}

.dn-woo-product-section .ct-card-variation-swatches .ct-variation-swatches:not([data-swatches-type="select"]) select {
    display: none !important;
}

.dn-woo-product-section__empty {
    padding: 20px 0;
}@media (max-width: 999.98px) {
    .dn-woo-product-section .dn-woo-product-section__grid[data-products] {
        grid-template-columns: repeat(var(--dn-section-tablet-columns), minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .dn-woo-product-section__intro--root {
        flex-direction: column;
    }

    .dn-woo-product-section__intro--child {
        flex-direction: column;
    }

    .dn-woo-product-section__intro-actions {
        align-self: flex-start;
        justify-content: flex-start;
    }

    .dn-woo-product-section__intro--root .dn-woo-product-section__intro-title {
        margin-bottom: 0;
    }

    .dn-woo-product-section .dn-woo-product-section__filters {
        gap: var(--dn-section-filter-gap, 12px) var(--dn-section-filter-column-gap, 12px);
    }

    .dn-woo-product-section .dn-woo-product-section__grid[data-products] {
        grid-template-columns: repeat(var(--dn-section-mobile-columns), minmax(0, 1fr));
    }
}