.gld-filter {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.gld-filter *,
.gld-filter *::before,
.gld-filter *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.gld-filter-layout {
    display: grid !important;

    /* Keep the filter at exactly one quarter of the available row.
       minmax(0, ...) is important: it lets both columns shrink inside
       the parent instead of the sidebar forcing itself over products. */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 3fr);

    gap: clamp(24px, 2.5vw, 40px);

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    align-items: start;
}


/* =========================================================
   LEFT SIDEBAR
   ========================================================= */

.gld-filter-sidebar {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   RULER AREA
   ========================================================= */

.gld-filter-ruler-area {
    position: relative;

    width: 100%;
    height: 260px;

    margin: 0;
    padding: 0;

    overflow: visible;
}


/* =========================================================
   IMAGE AREA

   The image grows from the ruler intersection. The image's
   right edge represents width and its top edge represents
   depth. This makes the default 800 mm x 315 mm state line up
   exactly with the 800 and 315 ruler labels.
   ========================================================= */

.gld-filter-image-area {
    position: absolute;

    top: 20px;
    left: 45px;

    width:
        calc(
            100% - 45px
        );

    height: 210px;

    margin: 0;
    padding: 0;

    overflow: visible;
}


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.gld-filter-image-wrapper {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 80px;
    height: 35px;

    margin: 0;
    padding: 0;

    overflow: visible;

    pointer-events: auto;

    cursor: grab;

    z-index: 10;
}


.gld-filter-image-wrapper:active {
    cursor: grabbing;
}


/* =========================================================
   IMAGE
   ========================================================= */

.gld-filter-image-wrapper img {
    position: absolute;

    left: 0;
    bottom: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: fill !important;

    user-select: none;

    -webkit-user-select: none;

    -webkit-user-drag: none;

    pointer-events: none;
}


/* =========================================================
   DRAG HANDLE
   ========================================================= */

.gld-filter-drag-handle {
    position: absolute;
    top: 6px;
    right: -18px;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #eec752 !important;
    color: #111 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    line-height: 1;
    transform: translate(
            -50%,
            -50%
        );
    cursor: grab;
    z-index: 1000;
    touch-action: none;
    user-select: none;
    box-shadow: 0px 0px 1px 1px #0000003d;
    border-radius: 50%;
}

.gld-filter-drag-handle .gld-filter-drag-icon {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 15px;
    color: currentColor;
    pointer-events: none;
}

.gld-filter-drag-handle.is-dragging {
    cursor: grabbing;
}


/* =========================================================
   VERTICAL RULER

   DO NOT MOVE THIS.

   The line stays at the original location.

   The labels are positioned independently.
   ========================================================= */

.gld-filter-ruler-vertical {
    position: absolute;

    top: 20px;
    left: 0;

    width: 45px;
    height: 210px;

    margin: 0;
    padding: 0;

    border-right:
        1px solid #777;

    box-sizing: border-box;
}


/* =========================================================
   VERTICAL TICKS

   Exactly three visual ticks: one for each labelled value
   (600, 315 and 30). The drag calculation remains continuous.
   ========================================================= */

.gld-filter-ruler-vertical::after {
    content: "";

    position: absolute;

    top: 0;
    right: -1px;

    width: 8px;
    height: 100%;

    background:
        linear-gradient(#777, #777) right top / 8px 1px no-repeat,
        linear-gradient(#777, #777) right 77.5px / 8px 1px no-repeat,
        linear-gradient(#777, #777) right calc(100% - 55px) / 8px 1px no-repeat;

    pointer-events: none;
}


/* =========================================================
   VERTICAL LABELS

   The line stays where it is.

   Only the numbers move.

   30:
       third tick from bottom

   315:
       midpoint of the usable range

   600:
       top of usable range
   ========================================================= */

.gld-filter-ruler-vertical
.gld-filter-ruler-label {

    position: absolute;

    left: -5px;

    width: 38px;

    margin: 0;
    padding: 0;

    color: #111;

    font-size: 12px;

    line-height: 1;

    text-align: right;

    white-space: nowrap;
}


/* 600 */

.gld-filter-ruler-label-top {
    top: 0;
}


/* 315 */

.gld-filter-ruler-vertical
.gld-filter-ruler-label-middle {

    top:
        calc(
            (
                210px - 55px
            ) * 0.5
        );

    transform:
        translateY(
            -50%
        );
}


/* 30 */

.gld-filter-ruler-label-bottom {

    bottom: 55px;

    transform:
        translateY(
            50%
        );
}


/* =========================================================
   HORIZONTAL RULER

   IMPORTANT:

   This stays connected to the vertical ruler.

   It is NOT shifted 80px.

   The line starts at the vertical ruler line.
   ========================================================= */

.gld-filter-ruler-horizontal {
    position: absolute;

    top: 230px;

    left: 45px;

    width:
        calc(
            100% - 45px
        );

    height: 40px;

    margin: 0;
    padding: 0;

    border-top:
        1px solid #777;

    box-sizing: border-box;
}


/* =========================================================
   HORIZONTAL TICKS

   Exactly three visual ticks: one for each labelled value
   (600, 800 and 1000). The drag calculation remains continuous.
   ========================================================= */

.gld-filter-ruler-horizontal::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 8px;

    background:
        linear-gradient(#777, #777) 55px top / 1px 8px no-repeat,
        linear-gradient(#777, #777) calc(50% + 27.5px) top / 1px 8px no-repeat,
        linear-gradient(#777, #777) right top / 1px 8px no-repeat;

    pointer-events: none;
}


/* =========================================================
   HORIZONTAL LABELS
   ========================================================= */

.gld-filter-ruler-horizontal
.gld-filter-ruler-label {

    position: absolute;

    top: 12px;

    margin: 0;
    padding: 0;

    color: #111;

    font-size: 12px;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   600

   First labelled tick in the compact ruler.
   ========================================================= */

.gld-filter-ruler-label-left {

    left: 55px;

    transform:
        translateX(
            -50%
        );
}


/* =========================================================
   800

   Midpoint between the 600 and 1000 positions.
   ========================================================= */

.gld-filter-ruler-horizontal
.gld-filter-ruler-label-middle {

    left:
        calc(
            55px +
            (
                100% - 55px
            ) * 0.5
        );

    transform:
        translateX(
            -50%
        );
}


/* =========================================================
   1000

   End of ruler.
   ========================================================= */

.gld-filter-ruler-label-right {

    right: 0;
}


/* =========================================================
   CURRENT DIMENSION LABELS
   ========================================================= */

.gld-filter-current-width,
.gld-filter-current-depth {

    display: none !important;
}


/* =========================================================
   DIMENSIONS
   ========================================================= */

.gld-filter-dimensions {

    width: 100%;

    margin:
        20px 0 0;

    padding: 0;
}


.gld-filter-dimensions h3 {

    margin:
        0 0 20px !important;

    padding: 0;

    font-size:
        clamp(26px, 2.8vw, 42px) !important;

    font-weight:
        700 !important;

    line-height:
        0.95 !important;

    text-transform:
        uppercase !important;

    letter-spacing:
        -1px;

    white-space:
        nowrap;
}


/* =========================================================
   DIMENSION ROW
   ========================================================= */

.gld-filter-dimension {

    display:
        flex !important;

    align-items:
        center;

    gap:
        10px;

    width:
        100%;

    margin:
        0 0 10px !important;

    padding: 0;
}


/* Respect the HTML hidden attribute on individual dimension rows. */
.gld-filter-dimension[hidden] {

    display:
        none !important;
}


.gld-filter-dimension label {

    flex:
        0 0 25px;

    width:
        25px;

    margin:
        0 !important;

    padding: 0;

    font-weight:
        700;
}


.gld-filter-dimension input {

    flex:
        0 0 100px;

    width:
        100px !important;

    max-width:
        100px !important;

    margin:
        0 !important;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.gld-filter-products-area {

    width:
        100%;

    min-width:
        0;

    max-width:
        100%;

    margin: 0;
    padding: 0;
}


.gld-filter-results {

    width:
        100%;

    min-width:
        0;

    max-width:
        100%;

    margin: 0;
    padding: 0;
}


ul.products.gld-filter-live-results.is-loading {
    opacity:
        0.65;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

ul.products.gld-filter-live-results {

    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        ) !important;

    column-gap:
        25px !important;

    row-gap:
        35px !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;

    float:
        none !important;
}


/* =========================================================
   PRODUCT ITEM
   ========================================================= */

ul.products.gld-filter-live-results
li.product {

    display:
        block !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    float:
        none !important;

    clear:
        none !important;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

ul.products.gld-filter-live-results
li.product
img {

    display:
        block;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/* =========================================================
   NO PRODUCTS
   ========================================================= */

.gld-filter-no-products {

    width:
        100%;

    margin:
        0;

    padding:
        10px 0;
}


.gld-filter-no-products p {
    margin:
        0 !important;
}


/* =========================================================
   COMPACT DIMENSION GUIDE

   Keep the ruler neat inside the 1/4 filter column. The guide
   intentionally does not consume the full sidebar width.
   ========================================================= */

.gld-filter-dimension-selector {
    width: 100%;
    max-width: 220px;
}

/* =========================================================
   1/4 COLUMN CONTAINMENT

   The ruler and controls must always resolve their width from the
   sidebar column, never from their intrinsic content. The small right
   inset keeps the drag handle inside the 1/4 column at the 1000 mm
   maximum instead of allowing it to sit over the product grid.
   ========================================================= */

.gld-filter-sidebar,
.gld-filter-ruler-area,
.gld-filter-dimensions {
    max-width: 100%;
    min-width: 0;
}

.gld-filter-image-area,
.gld-filter-ruler-horizontal {
    width: calc(100% - 59px);
}

.gld-filter-dimensions h3 {
    max-width: 100%;
    overflow: visible;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

    .gld-filter-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 3fr);

        gap:
            20px;
    }


    ul.products.gld-filter-live-results {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

}


@media (max-width: 760px) {

    .gld-filter-layout {

        display:
            block !important;
    }


    .gld-filter-sidebar {

        margin-bottom:
            40px;
    }

}


@media (max-width: 480px) {

    ul.products.gld-filter-live-results {

        grid-template-columns:
            1fr !important;
    }

}

/* =========================================================
   EXTERNAL 75% PRODUCT TARGET

   The shortcode itself belongs in the left 25% builder column.
   The normal WooCommerce product list in the right 75% column is
   reused as the live result grid. JS adds this class automatically.
   ========================================================= */

ul.products.gld-filter-live-results {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

ul.products.gld-filter-live-results.is-loading {
    opacity: 0.65;
}

ul.products.gld-filter-live-results .gld-filter-loading-item,
ul.products.gld-filter-live-results .gld-filter-no-products {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 !important;
}

/* =========================================================
   FILTER HEADER + ACCORDION
   ========================================================= */

.gld-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 22px;
    padding: 0;
}

.gld-filter-title {
    color: #000;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
}

.gld-filter-clear {
    appearance: none;
    margin: 0 !important;
    padding: 0 0 3px !important;
    border: 0 !important;
    border-bottom: 2px solid #d71920 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000 !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.gld-filter-clear:hover,
.gld-filter-clear:focus {
    background: transparent !important;
    color: #111 !important;
    opacity: 0.7;
}

.gld-filter-accordion {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.gld-filter-accordion-toggle {
    appearance: none;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none !important;
}

.gld-filter-accordion-toggle:hover,
.gld-filter-accordion-toggle:focus {
    background: transparent !important;
    color: #111 !important;
}

.gld-filter-accordion-icon {
    flex: 0 0 auto;
    min-width: 18px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.gld-filter-accordion-content {
    width: 100%;
    min-width: 0;
}

.gld-filter-accordion-content[hidden] {
    display: none !important;
}

.gld-filter-help {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 1.45;
}

/* The large legacy DIMENSIONS heading is replaced by the accordion header. */
.gld-filter-dimensions {
    margin-top: 18px;
}


/* =========================================================
   DIMENSION DETAILS + LOCAL CLEAR
   ========================================================= */

.gld-filter-dimension-unit {
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.gld-filter-clear-dimensions {
    appearance: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    max-width: 100%;
    margin: 12px 0 0 !important;
    padding: 10px 18px !important;
    border: 1px solid #777 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111 !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

.gld-filter-clear-dimensions:hover,
.gld-filter-clear-dimensions:focus {
    background: #f5f5f5 !important;
    color: #111 !important;
    border-color: #111 !important;
}

.gld-filter-clear-dimensions-icon {
    display: inline-block;
    font-size: 20px;
    font-weight: 300;
    line-height: 0.8;
}

.gld-filter-section-divider {
    width: 100%;
    height: 1px;
    margin: 24px 0 0;
    padding: 0;
    background: #d9d9d9;
}


/* =========================================================
   v1.0.27 - CLEANER COMPACT DIMENSION GUIDE

   Keep exactly three ticks on each ruler, one tick per visible
   number. The drag range remains continuous; this only simplifies
   the visual guide and reduces its vertical footprint.
   ========================================================= */

.gld-filter-ruler-area {
    height: 215px;
}

.gld-filter-image-area {
    top: 15px;
    left: 45px;
    height: 165px;
}

.gld-filter-ruler-vertical {
    top: 15px;
    height: 165px;
}

.gld-filter-ruler-horizontal {
    top: 180px;
    height: 35px;
}

/* Remove every generated background tick from the old ruler. */
.gld-filter-ruler-vertical::after,
.gld-filter-ruler-horizontal::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Vertical positions use a 40px compact offset for the 30mm mark. */
.gld-filter-ruler-vertical .gld-filter-ruler-label-middle {
    top: calc((165px - 40px) * 0.5);
}

.gld-filter-ruler-vertical .gld-filter-ruler-label-bottom {
    bottom: 40px;
}

/* Horizontal positions use the same compact 40px ruler offset. */
.gld-filter-ruler-label-left {
    left: 40px;
}

.gld-filter-ruler-horizontal .gld-filter-ruler-label-middle {
    left: calc(40px + (100% - 40px) * 0.5);
}

/* Exactly one physical tick is attached to each visible label. */
.gld-filter-ruler-vertical .gld-filter-ruler-label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -13px;
    width: 8px;
    height: 1px;
    background: #777;
    transform: translateY(-50%);
    pointer-events: none;
}

.gld-filter-ruler-horizontal .gld-filter-ruler-label::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 1px;
    height: 8px;
    background: #777;
    transform: translateX(-50%);
    pointer-events: none;
}

/* The far-right label is right-aligned, so anchor its tick to the ruler end. */
.gld-filter-ruler-horizontal .gld-filter-ruler-label-right::before {
    left: auto;
    right: 0;
    transform: none;
}

/* =========================================================
   v1.0.28 - REFINED GUIDE PROPORTIONS

   Keep the vertical ruler at approximately 201px as the visual
   reference height requested for the compact sidebar guide. The
   image area uses the same height so the 800 x 315 default still
   lines up with the visible ruler labels. Also tighten the space
   before Dimension (MM).
   ========================================================= */

.gld-filter-ruler-area {
    height: 236px;
}

.gld-filter-image-area {
    top: 15px;
    height: 201px;
}

.gld-filter-ruler-vertical {
    top: 15px;
    height: 201px;
}

.gld-filter-ruler-horizontal {
    top: 216px;
    height: 20px;
}

/* Keep the three vertical labels/ticks aligned to the 201px ruler. */
.gld-filter-ruler-vertical .gld-filter-ruler-label-middle {
    top: calc((201px - 40px) * 0.5);
}

.gld-filter-ruler-vertical .gld-filter-ruler-label-bottom {
    bottom: 40px;
}

/* Remove the unnecessary visual gap beneath the draggable guide. */
.gld-filter-dimension-selector {
    margin-bottom: 0;
}

.gld-filter-dimensions {
    margin-top: 6px;
}

/* =========================================================
   v1.0.29 - TYPE FILTER

   Second independent accordion below Dimensions. TYPE uses
   multiple checkboxes and intentionally has no local clear
   button; the global Clear all action resets these selections.
   ========================================================= */

.gld-filter-type-section {
    width: 100%;
    min-width: 0;
    margin: 22px 0 0;
    padding: 0;
}

.gld-filter-type-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.gld-filter-type-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #111 !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    cursor: pointer;
}

.gld-filter-type-option:last-of-type {
    margin-bottom: 0 !important;
}

.gld-filter-type-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 20px;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #8a8a8a !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
    position: relative;
}

.gld-filter-type-checkbox:checked {
    border-color: #111 !important;
    background: #111 !important;
}

.gld-filter-type-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.gld-filter-type-checkbox:focus-visible {
    outline: 2px solid #25b8df;
    outline-offset: 2px;
}

.gld-filter-type-content .gld-filter-section-divider {
    margin-top: 22px;
}


/* =========================================================
   v1.0.30 - FINISH FILTER

   Circular visual swatches with labels. The actual checkbox stays
   accessible but visually hidden; selected finishes receive a clear
   highlighted row and swatch ring.
   ========================================================= */

.gld-filter-finish-section {
    width: 100%;
    min-width: 0;
    margin: 22px 0 0;
    padding: 0;
}

.gld-filter-finish-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.gld-filter-finish-option {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px !important;
    padding: 6px 8px 6px 2px !important;
    border-radius: 6px;
    color: #111 !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gld-filter-finish-option:last-of-type {
    margin-bottom: 0 !important;
}

.gld-filter-finish-checkbox {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gld-filter-finish-swatch {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    box-shadow: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.gld-filter-finish-swatch-black {
    background: linear-gradient(115deg, #050505 0 54%, #1f1f1f 54% 100%);
    border-color: #111;
}

.gld-filter-finish-swatch-stainless-steel {
    background: linear-gradient(115deg, #bfc3c4 0%, #f4f5f5 46%, #d3d6d6 100%);
}

.gld-filter-finish-swatch-white {
    background: #fff;
}

.gld-filter-finish-swatch-matte {
    background: linear-gradient(115deg, #4c4c4c 0%, #777 100%);
    border-color: #555;
}

.gld-filter-finish-label {
    min-width: 0;
    transition: font-weight 0.15s ease;
}

.gld-filter-finish-option:has(.gld-filter-finish-checkbox:checked) {
    background: #f3f3f3;
}

.gld-filter-finish-checkbox:checked + .gld-filter-finish-swatch {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(37, 184, 223, 0.28);
    transform: scale(1.03);
}

.gld-filter-finish-checkbox:checked ~ .gld-filter-finish-label {
    font-weight: 700 !important;
}

.gld-filter-finish-checkbox:focus-visible + .gld-filter-finish-swatch {
    outline: 2px solid #25b8df;
    outline-offset: 3px;
}

.gld-filter-finish-content .gld-filter-section-divider {
    margin-top: 22px;
}


/* =========================================================
   v1.0.32 - INDEPENDENT HIDDEN SCROLL AREAS

   Desktop only:
   - Filter and products scroll independently.
   - The product scroll area is also added automatically by JS
     when the optional target class is not present.
   - Scrollbars stay functional but are visually hidden.
   ========================================================= */

@media (min-width: 769px) {

    .gld-filter,
    .gld-filter-products-target,
    .gld-filter-products-scroll {
        height: min(760px, calc(100vh - 140px));
        max-height: min(760px, calc(100vh - 140px));
        min-height: 420px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Allow scroll chaining: when this panel reaches its top or bottom,
           wheel/trackpad scrolling continues on the page naturally. */
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;

        /* Firefox: keep scrolling but hide the scrollbar. */
        scrollbar-width: none !important;
        scrollbar-color: transparent transparent !important;
    }

    /* Chrome, Edge and Safari: keep scrolling but hide the bar. */
    .gld-filter::-webkit-scrollbar,
    .gld-filter-products-target::-webkit-scrollbar,
    .gld-filter-products-scroll::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none;
    }

    /* No reserved scrollbar gutter, so both columns stay clean. */
    .gld-filter,
    .gld-filter-products-target,
    .gld-filter-products-scroll {
        scrollbar-gutter: auto;
    }
}

@media (max-width: 768px) {
    .gld-filter,
    .gld-filter-products-target,
    .gld-filter-products-scroll {
        height: auto;
        max-height: none;
        min-height: 0;
        overflow: visible !important;
        scrollbar-gutter: auto;
    }
}


/* =========================================================
   v1.0.34 - LIVE PRODUCT SEARCH
   ========================================================= */

.gld-filter-search-wrap {
    position: relative;
    width: 100%;
    margin: 4px 0 22px;
}

.gld-filter-search {
    display: block;
    width: 100% !important;
    height: 44px;
    margin: 0 !important;
    padding: 9px 38px 9px 12px !important;
    border: 1px solid #bdbdbd !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #111 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.gld-filter-search:focus {
    border-color: #111 !important;
    outline: none !important;
    box-shadow: none !important;
}

.gld-filter-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.gld-filter-search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #555 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    text-align: center;
    transform: translateY(-50%);
    cursor: pointer;
}

.gld-filter-search-clear:hover,
.gld-filter-search-clear:focus {
    color: #111 !important;
    outline: none !important;
}

.gld-filter-search-clear[hidden] {
    display: none !important;
}


/* =========================================================
   v1.0.33 - PRODUCT RESULTS TOOLBAR
   ========================================================= */

.gld-filter-results-toolbar {
    position: static;
    top: auto;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 0 0 24px;
    padding: 10px 0 12px;
    border-bottom: 0;
    background: transparent;
    color: #111;
    box-sizing: border-box;
}

.gld-filter-results-count {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.gld-filter-sort-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.gld-filter-sort-select {
    appearance: none;
    -webkit-appearance: none;
    width: auto !important;
    min-width: 86px;
    max-width: 190px;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 24px 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111 !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    cursor: pointer;
}

.gld-filter-sort-wrap::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.gld-filter-sort-select:focus {
    outline: 1px solid #999;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .gld-filter-results-toolbar {
        align-items: flex-start;
        gap: 12px;
    }

    .gld-filter-sort-wrap {
        gap: 6px;
    }

    .gld-filter-sort-select {
        max-width: 150px;
    }
}


/* =========================================================
   v1.0.35 - CENTERED 12-PER-LOAD PRODUCT CONTROLS
   ========================================================= */

.gld-filter-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 28px auto 10px;
    padding: 0 12px 12px;
    text-align: center;
    box-sizing: border-box;
}

.gld-filter-load-more[hidden],
.gld-filter-load-more-button[hidden] {
    display: none !important;
}

.gld-filter-load-more-status {
    margin: 0 0 8px;
    padding: 0;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.gld-filter-load-more-track {
    position: relative;
    width: min(230px, 80%);
    height: 5px;
    margin: 0 0 22px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe5e7;
}

.gld-filter-load-more-progress {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #000;
    transition: width 180ms ease;
}

.gld-filter-load-more-button {
    appearance: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 178px;
    margin: 0 auto !important;
    padding: 10px 20px !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: .3s;
}

.gld-filter-load-more-button:hover,
.gld-filter-load-more-button:focus {
    border-color: #eec752 !important;
    background: #eec752 !important;
    color: #000 !important;
    outline: none !important;
}

/* Hidden product cards should not reserve grid space. */
ul.products li.product[hidden] {
    display: none !important;
}

/* =========================================================
   v1.0.39 - POLISHED PRICE RANGE
   Reference-style two value fields + one dual-handle slider.
   Everything is constrained to the filter column.
   ========================================================= */

.gld-filter-price-section,
.gld-filter-price-content,
.gld-filter-price-range {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.gld-filter-price-section {
    margin: 22px 0 0;
    padding: 0;
}

.gld-filter-price-content {
    margin: 0;
    padding: 10px 0 0;
}

.gld-filter-price-range {
    margin: 0;
    padding: 0;
}

.gld-filter-price-values {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
    box-sizing: border-box;
}

.gld-filter-price-value {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #666 !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: left !important;
    outline: 0 !important;
    box-sizing: border-box !important;
}

.gld-filter-price-value:focus {
    border-color: #999 !important;
}

.gld-filter-price-value-separator {
    display: block;
    width: 14px;
    color: #555;
    font-size: 13px;
    line-height: 1;
    text-align: center;
}

.gld-filter-price-bubbles,
.gld-filter-price-limits,
.gld-filter-price-input {
    display: none !important;
}

.gld-filter-price-slider {
    position: relative;
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    min-width: 0;
    height: 22px;
    margin: 0 6px;
    padding: 0;
    box-sizing: border-box;
    touch-action: none;
    cursor: pointer;
}

.gld-filter-price-track,
.gld-filter-price-selected {
    position: absolute;
    top: 50%;
    height: 6px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    transform: translateY(-50%);
    box-sizing: border-box;
    pointer-events: none;
}

.gld-filter-price-track {
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #f2f2f2 0%, #d9d9d9 50%, #ededed 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10);
    z-index: 1;
}

.gld-filter-price-selected {
    left: 0;
    width: 100%;
    background: #111;
    z-index: 2;
}

.gld-filter-price-handle {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 12px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #eeeeee 0%, #c8c8c8 48%, #dddddd 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
    box-sizing: border-box;
}

.gld-filter-price-handle::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 4px;
    height: 1px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        0 3px 0 rgba(125, 125, 125, 0.22),
        0 6px 0 rgba(255, 255, 255, 0.62);
}

.gld-filter-price-handle:active {
    cursor: grabbing;
}

.gld-filter-price-handle:focus-visible {
    outline: 1px solid #555;
    outline-offset: 2px;
}

.gld-filter-price-handle-min { left: 0; }
.gld-filter-price-handle-max { left: 100%; }

.gld-filter-price-content .gld-filter-section-divider {
    margin-top: 18px;
}

/* Product Section */
#filterShop ul.products {
    align-items: stretch !important;
}
#filterShop ul.products > li {
    box-shadow: 0 0 3px 1px #0000002b;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    align-self: stretch !important;
    height: 100% !important;
    padding: 10px !important;
    background: #fff;
}

/* Keep the image and product information together at the top. The summary
   is the only part of the card allowed to grow, so any difference in card
   height becomes flexible space immediately above the price/actions. */
#filterShop ul.products > li > .astra-shop-thumbnail-wrap {
    flex: 0 0 auto !important;
    width: 100% !important;
}

#filterShop ul.products > li > .astra-shop-summary-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
}

#filterShop .astra-shop-summary-wrap > .price {
    margin-top: auto !important;
    flex: 0 0 auto !important;
}

#filterShop .FillterShopCartBuy {
    flex: 0 0 auto !important;
}
#filterShop img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    object-fit: cover !important;
    max-height: 140px !important;
}
.FillterShopCartBuy {
    justify-content: space-around;
    display: flex;
}
.FillterShopCartBuy a {
    font-family: montserrat !important;
    padding: 18px 5px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    width: 50%;
}
.FillterShopCartBuy a:not(:last-child) {
    margin-right: 5px !important;
}
li.product-type-variable a.button.product_type_variable.add_to_cart_button,
li.outofstock a.button.product_type_simple {
    width: 100%;
}
#filterShop a.button.product_type_variable.add_to_cart_button,
#filterShop a.button.product_type_simple,
.FillterShopCartBuy a:first-child {
    font-family: 'Montserrat' !important;
    padding: 18px 5px !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    background: #0b0c0b;
    text-align: center;
    max-height: 51px;
    border-radius: 0;
}
.FillterShopCartBuy a:last-child {
    border: 1px solid #0000001c;
    background: #dadada;
    color: #0b0c0b;
}
#filterShop a.button.product_type_variable.add_to_cart_button:hover,
#filterShop a.button.product_type_simple:hover,
.FillterShopCartBuy a:first-child:hover {
    background: #0b0c0b;
    opacity: .8;
}
.FillterShopCartBuy a:last-child:hover {
    border: 1px solid #0000001c;
    background: #dadada;
    color: #0b0c0b;
    opacity: .8;
}
#filterShop li.product_cat-packages h2.woocommerce-loop-product__title {
    padding-top: 41px;
}
#filterShop li.product_cat-packages:before {
    font-weight: var(--bold);
    content: "SAVE 10%";
    color: #eec752;
    position: absolute;
    border-radius: 3px;
    background: #171616;
    padding: 0px 7px;
    z-index: 1;
    top: 6px;
    right: 6px;
    box-shadow: 0 0 5px 1px #ffffff57;
}
#filterShop .astra-shop-thumbnail-wrap {
    position: relative;
}
#filterShop .gld-product-stock-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 5;
    min-width: 65%;
    padding: 16px 12px;
    background: #0b0c0b;
    color: #eec752;
    font-family: 'Montserrat' !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
#filterShop ul.products {
    row-gap: 20px !important;
}

/* Astra also renders its own out-of-stock overlay inside the thumbnail.
   Goldline Filter uses the custom black/gold badge instead, so keep only
   that badge inside the filtered catalogue. */
#filterShop .ast-shop-product-out-of-stock {
    display: none !important;
}
#filterShop .gld-product-card-id {
    margin-bottom: 0 !important;
    margin-top: 15px !important;
}
#filterShop .gld-product-card-series {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}
#filterShop .gld-product-card-id span.gld-product-card-value,
#filterShop .gld-product-card-series span.gld-product-card-value {
    font-family: 'Montserrat' !important;
    font-weight: 700;
    font-size: 14px;
    color: #000;
}
#filterShop h2.woocommerce-loop-product__title {
    font-weight: 400;
    color: #000;
}

.gld-product-card-meta-row span {
    font-family: 'Montserrat';
    font-size: 13px;
    color: #000;
}
#filterShop .gld-product-card-details {
    margin: 15px 0 20px !important;
}
.gld-product-card-meta-row span:first-child {
    font-weight: 700 !important;
}
#filterShop span.price span {
    font-family: 'Montserrat' !important;
    font-size: 16px !important;
}

/* =========================================================
   v1.0.40 - SCROLL CHAINING TO PAGE

   Keep the filter and products independently scrollable while
   allowing the document to continue scrolling once either panel
   reaches its own top or bottom boundary.
   ========================================================= */

@media (min-width: 769px) {
    .gld-filter,
    .gld-filter-products-target,
    .gld-filter-products-scroll {
        overscroll-behavior-y: auto !important;
    }
}


/* =========================================================
   v1.0.41 - SEAMLESS SCROLL HANDOFF

   JavaScript now transfers the unused portion of a wheel/trackpad
   delta to the page immediately when either desktop panel reaches
   its boundary. Native overscroll remains enabled as a fallback.
   ========================================================= */

@media (min-width: 769px) {
    .gld-filter,
    .gld-filter-products-target,
    .gld-filter-products-scroll {
        overscroll-behavior-y: auto !important;
    }
}


/* =========================================================
   v1.0.47 - DIMENSION GUIDE POLISH

   Apply the refined guide sizing requested for the sidebar,
   shift the complete draggable/ruler assembly slightly left,
   and render the vertical tick marks on whole pixels so they
   stay crisp instead of looking soft/blurry.
   ========================================================= */

/* Shift the complete ruler + draggable guide slightly left. */
.gld-filter-ruler-area {
    left: -6px;
}

/* Wider usable draggable/ruler width while keeping a small inset. */
.gld-filter-image-area,
.gld-filter-ruler-horizontal {
    width: calc(100% - 15px);
}

/* Preserve the exact product-image rendering adjustment. */
.gld-filter-image-wrapper img {
    position: absolute;
    left: 0px;
    bottom: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: fill !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Keep the middle vertical tick on a whole CSS pixel. */
.gld-filter-ruler-vertical .gld-filter-ruler-label-middle {
    top: 81px;
}

/* Avoid half-pixel transforms on the small horizontal tick marks. */
.gld-filter-ruler-vertical .gld-filter-ruler-label::after {
    top: 6px;
    right: -13px;
    width: 8px;
    height: 1px;
    transform: none;
    background: #666;
}

/* =========================================================
   v1.0.48 - VERTICAL TICK ALIGNMENT
   Stop each vertical tick exactly at the ruler line instead
   of extending a pixel into the draggable image area.
   ========================================================= */
.gld-filter-ruler-vertical .gld-filter-ruler-label::after {
    right: -12px;
}

/* =========================================================
   v1.0.74 - RESULTS TOOLBAR + LOAD MORE FIXES
   ========================================================= */

/* The product count and sorting toolbar stays in normal document flow
   so it scrolls together with the product cards and remains transparent. */
#filterShop .gld-filter-results-toolbar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    background: transparent !important;
    box-sizing: border-box;
}

/* The product cards use display:flex !important, so the browser's
   native [hidden] rule needs matching Goldline specificity. Without
   this, all products remain visible even though Load More reports 12. */
#filterShop ul.products li.product[hidden] {
    display: none !important;
}

/* =========================================================
   v1.0.101 - LARGE TABLET REFINEMENTS (992px - 1199px)

   Preserve the working desktop layout while scaling the
   dimension guide and product actions so they remain fully
   contained inside the narrower tablet columns.
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    #filterShop img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
        object-fit: cover;
        min-height: 160px !important;
        max-height: 160px !important;
    }

    /* Keep the dimension guide compact enough for the 25% sidebar. */
    .gld-filter-dimension-selector {
        width: 100%;
        max-width: 210px;
        box-sizing: border-box;
    }

    .gld-filter-ruler-area {
        left: 0;
        width: 100%;
        height: 205px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Reduce both draggable axes while preserving the same ruler origin. */
    .gld-filter-image-area {
        top: 15px;
        left: 45px;
        width: calc(100% - 55px);
        height: 170px;
        max-width: calc(100% - 55px);
    }

    .gld-filter-ruler-vertical {
        top: 15px;
        height: 170px;
    }

    .gld-filter-ruler-horizontal {
        top: 185px;
        left: 45px;
        width: calc(100% - 55px);
        height: 20px;
        max-width: calc(100% - 55px);
    }

    /* Keep the three vertical ruler ticks aligned to the reduced height. */
    .gld-filter-ruler-vertical .gld-filter-ruler-label-middle {
        top: 65px;
    }

    .gld-filter-ruler-vertical .gld-filter-ruler-label-bottom {
        bottom: 40px;
    }

    /* Slightly reduce the drag control so the maximum state stays contained. */
    .gld-filter-drag-handle {
        top: 2px;
        right: -17px;
        width: 20px;
        height: 20px;
    }

    .gld-filter-drag-handle .gld-filter-drag-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    /* Split the two action buttons without allowing the 5px gap to overflow. */
    .FillterShopCartBuy {
        width: 100%;
        min-width: 0;
    }

    .FillterShopCartBuy a {
        font-family: montserrat !important;
        padding: 14px 3px !important;
        font-weight: 400 !important;
        font-size: 11px !important;
        text-transform: uppercase;
        text-align: center;
        border-radius: 0;
        width: 50%;
        min-width: 0;
        box-sizing: border-box;
    }

    #filterShop a.button.product_type_variable.add_to_cart_button,
    #filterShop a.button.product_type_simple,
    .FillterShopCartBuy a:first-child {
        font-family: 'Montserrat' !important;
        padding: 14px 3px !important;
        font-weight: 400 !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-transform: uppercase;
        background: #0b0c0b;
        text-align: center;
        max-height: 47px;
        border-radius: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        box-sizing: border-box;
    }
}


/* =========================================================
   v1.0.110 - SMALL TABLET / MOBILE EXPERIENCE (991px AND BELOW)

   At this width the permanent 25% filter column makes the
   WooCommerce cards too narrow. Reuse the existing filter as a
   full-screen panel, give the catalogue the full row, and expose
   Filter / Sort through a compact sticky toolbar.
   ========================================================= */

.gld-filter-small-tablet-toolbar,
.gld-filter-small-tablet-close,
.gld-filter-small-tablet-footer,
.gld-filter-small-tablet-sort-backdrop,
.gld-filter-small-tablet-sort-sheet {
    display: none;
}

@media (max-width: 991px) {

    html.gld-filter-small-tablet-ui-locked,
    body.gld-filter-small-tablet-ui-locked {
        overflow: hidden !important;
    }

    /* The original shortcode column is empty while the filter panel is
       temporarily mounted on <body>. Let the WooCommerce column use the
       complete row without changing the desktop / 992+ builder layout. */
    body.gld-filter-small-tablet-mode .gld-filter-small-tablet-source-column {
        display: none !important;
    }

    body.gld-filter-small-tablet-mode .gld-filter-small-tablet-products-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Small tablet returns the product catalogue to normal page scrolling.
       The desktop independent-scroll behavior remains unchanged at 992+. */
    body.gld-filter-small-tablet-mode .gld-filter-products-target,
    body.gld-filter-small-tablet-mode .gld-filter-products-scroll {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        scrollbar-gutter: auto !important;
    }

    /* ---------------- Catalogue floating toolbar ---------------- */
    .gld-filter-small-tablet-toolbar {
        position: sticky;
        top: 80px;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        width: 100%;
        margin: 0 0 12px;
        padding: 12px 2px;
        background: #ffffff00;
        box-sizing: border-box;
        isolation: isolate;
        transition: box-shadow 260ms ease,
            transform 260ms ease;
    }

    .gld-filter-small-tablet-toolbar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: #fff;
        opacity: 0;
        box-shadow: 0 0 0 100vmax #fff;
        clip-path: inset(0 -100vmax);
        pointer-events: none;
        transition: opacity 260ms ease;
    }

    .gld-filter-small-tablet-toolbar.is-sticky {
        padding: 5px 2px;
        box-shadow: 0 8px 18px rgb(0 0 0 / 12%);
    }

    .gld-filter-small-tablet-toolbar.is-sticky .gld-filter-small-tablet-trigger {
        appearance: none;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 130px;
        max-width: 46%;
        min-height: 30px;
        margin: 0 !important;
        padding: 8px 18px !important;
        border: 1px solid #b9b9b9 !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-transform: none !important;
        white-space: nowrap;
        cursor: pointer;
    }

    .gld-filter-small-tablet-toolbar.is-sticky::before {
        opacity: 1;
    }

    .gld-filter-small-tablet-trigger {
        appearance: none;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 150px;
        max-width: 46%;
        min-height: 42px;
        margin: 0 !important;
        padding: 8px 18px !important;
        border: 1px solid #b9b9b9 !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-transform: none !important;
        white-space: nowrap;
        cursor: pointer;
    }

    .gld-filter-small-tablet-trigger:hover,
    .gld-filter-small-tablet-trigger:focus {
        border-color: #111 !important;
        background: #fff !important;
        color: #111 !important;
        outline: none !important;
    }

    .gld-filter-small-tablet-filter-icon {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        width: 15px;
        height: 14px;
    }

    .gld-filter-small-tablet-filter-icon i {
        display: block;
        height: 1px;
        background: currentColor;
    }

    .gld-filter-small-tablet-filter-icon i:nth-child(1) { width: 15px; }
    .gld-filter-small-tablet-filter-icon i:nth-child(2) { width: 10px; }
    .gld-filter-small-tablet-filter-icon i:nth-child(3) { width: 5px; }

    .gld-filter-small-tablet-sort-chevron {
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
    }

    /* Keep only the live product count from the original toolbar. Sorting
       is exposed through the small-tablet bottom sheet instead. */
    #filterShop .gld-filter-results-toolbar {
        display: block !important;
        width: 100% !important;
        margin: 0 0 16px !important;
        padding: 0 2px !important;
    }

    #filterShop .gld-filter-results-toolbar .gld-filter-sort-wrap {
        display: none !important;
    }

    /* ---------------- Full-width two-column catalogue ---------------- */
    #filterShop ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 16px !important;
        row-gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-items: stretch !important;
    }

    #filterShop ul.products::before,
    #filterShop ul.products::after {
        display: none !important;
        content: none !important;
    }

    #filterShop ul.products > li.product {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* ---------------- Full-screen filter panel ---------------- */
    body.gld-filter-small-tablet-mode .gld-filter-small-tablet-panel {
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;
        display: none !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    body.gld-filter-small-tablet-filter-open .gld-filter-small-tablet-panel {
        display: flex !important;
    }

    .gld-filter-small-tablet-panel > .gld-filter-toolbar {
        flex: 0 0 68px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 68px;
        margin: 0 !important;
        padding: 0 18px !important;
        border-bottom: 1px solid #e1e1e1;
        background: #eef3f5;
        box-sizing: border-box;
    }

    .gld-filter-small-tablet-panel > .gld-filter-toolbar .gld-filter-title {
        margin: 0 !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    /* Clear All moves to the fixed action area at the bottom. */
    .gld-filter-small-tablet-panel > .gld-filter-toolbar .gld-filter-clear {
        display: none !important;
    }

    .gld-filter-small-tablet-close,
    .gld-filter-small-tablet-sort-close {
        appearance: none;
        position: relative;
        display: block !important;
        width: 34px;
        height: 34px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .gld-filter-small-tablet-close::before,
    .gld-filter-small-tablet-close::after,
    .gld-filter-small-tablet-sort-close::before,
    .gld-filter-small-tablet-sort-close::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 16px;
        width: 20px;
        height: 2px;
        background: #111;
    }

    .gld-filter-small-tablet-close::before,
    .gld-filter-small-tablet-sort-close::before {
        transform: rotate(45deg);
    }

    .gld-filter-small-tablet-close::after,
    .gld-filter-small-tablet-sort-close::after {
        transform: rotate(-45deg);
    }

    .gld-filter-small-tablet-panel > .gld-filter-sidebar {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        margin: 0 !important;
        padding: 18px 18px 28px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #fff;
        box-sizing: border-box;
    }

    /* The overlay has enough room for a comfortable dimension guide; do not
       inherit the narrow 25%-sidebar presentation used on larger screens. */
    .gld-filter-small-tablet-panel .gld-filter-dimension-selector {
        width: 100%;
        max-width: 300px;
    }

    .gld-filter-small-tablet-footer {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 10px 16px 12px;
        border-top: 1px solid #e5e5e5;
        background: #fff;
        box-sizing: border-box;
    }

    .gld-filter-small-tablet-footer button {
        appearance: none;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 1 1 50%;
        min-height: 42px;
        margin: 0 !important;
        padding: 9px 14px !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        cursor: pointer;
    }

    .gld-filter-small-tablet-footer-clear {
        border: 1px solid #111 !important;
        background: #fff !important;
        color: #111 !important;
    }

    .gld-filter-small-tablet-view-results {
        border: 1px solid #0b0c0b !important;
        background: #0b0c0b !important;
        color: #eec752 !important;
    }

    /* ---------------- Sort bottom sheet ---------------- */
    .gld-filter-small-tablet-sort-backdrop {
        appearance: none;
        position: fixed;
        inset: 0;
        z-index: 999997;
        display: block !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.28) !important;
        box-shadow: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .gld-filter-small-tablet-sort-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999998;
        display: block !important;
        max-height: 62vh;
        padding: 16px 18px 22px;
        border-radius: 26px 26px 0 0;
        background: #fff;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14);
        overflow-y: auto;
        transform: translateY(105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.22s ease, visibility 0.22s ease;
        box-sizing: border-box;
    }

    body.gld-filter-small-tablet-sort-open .gld-filter-small-tablet-sort-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.gld-filter-small-tablet-sort-open .gld-filter-small-tablet-sort-sheet {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    .gld-filter-small-tablet-sort-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        padding: 0 0 10px;
        border-bottom: 1px solid #ededed;
    }

    .gld-filter-small-tablet-sort-sheet-header strong {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #111;
    }

    .gld-filter-small-tablet-sort-options {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .gld-filter-small-tablet-sort-option {
        appearance: none;
        position: relative;
        display: block !important;
        width: 100%;
        min-height: 50px;
        margin: 0 !important;
        padding: 13px 42px 13px 4px !important;
        border: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-transform: none !important;
        cursor: pointer;
    }

    .gld-filter-small-tablet-sort-option.is-selected {
        font-weight: 700 !important;
    }

    .gld-filter-small-tablet-sort-option.is-selected::after {
        content: '✓';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #111;
        font-size: 16px;
        font-weight: 700;
    }
}

/* =========================================================
   v1.0.110 - MOBILE CATALOGUE (767px AND BELOW)

   Reuse the same Filter / Sort interaction introduced for
   small tablet, but give each WooCommerce product the full row.
   All larger breakpoints keep their existing approved layouts.
   ========================================================= */

@media (max-width: 767px) {

    #filterShop ul.products {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 20px !important;
    }

    #filterShop ul.products > li.product {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}