.shop-hero,
.shop-body {
    width:         100vw;
    margin-left:   calc(-50vw + 50%);
    margin-right:  calc(-50vw + 50%);
}

.shop-hero {
    background-image:    linear-gradient(90deg, rgba(63, 143, 70, .9) 0%, rgba(109, 193, 112, .9) 100%), url('../../img/consultation_bg.webp');
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    padding:              24px 20px;
    text-align:          center;
}

.shop-hero__inner { max-width: 640px; margin: 0 auto; }

.shop-hero__title {
    margin:      0;
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    color:       #ffffff;
}

.shop-body { background: #f6f5f3; padding: 30px 0 90px; }

.shop-body__inner { max-width: 1720px; margin: 0 auto; padding: 0 20px; }

/* WooCommerce core CSS ships `.woocommerce .woocommerce-breadcrumb { margin; padding:0 }`
   — a two-class selector that outranks a single .shop-breadcrumb class no matter the
   load order, so this has to match it class-for-class to actually win. */
.woocommerce-breadcrumb.shop-breadcrumb {
    max-width:  1720px;
    margin:     0 auto !important;
    padding:    30px 20px 0 !important;
    background: #f6f5f3;
}

.shop-category-description { padding: 40px 0 60px; }

.shop-category-description .shop-body__inner {
    font-size:   15px;
    line-height: 1.6;
    color:       var(--color-muted);
}

.shop-category-description p:last-child { margin-bottom: 0; }

.shop-toprow {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    margin-bottom:   30px;
}

.shop-toprow__left {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         12px;
}

.shop-active-filters {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.shop-active-filter {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 10px;
    background:    #ffffff;
    border:        1px solid var(--color-border);
    border-radius: 20px;
    font-size:     14px;
    line-height:   18px;
    color:         #000000;
    cursor:        pointer;
    transition:    border-color var(--transition), color var(--transition);
}

.shop-active-filter:hover {
    border-color: var(--color-primary);
    color:        var(--color-primary);
}

.shop-active-filter span { font-size: 16px; line-height: 1; }

.shop-toprow__sep {
    display:     inline-block;
    margin:      0 8px;
    color:       rgba(0, 0, 0, .5);
}

/* WooCommerce core ships `.woocommerce .woocommerce-ordering { margin:0 0 1em }` —
   two classes, outranks a single .woocommerce-ordering selector regardless of order. */
.woocommerce .woocommerce-ordering { margin: 0; }

.woocommerce-ordering .orderby {
    max-width:     350px;
    padding:       8px 32px 8px 16px;
    background:    #ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23000000" stroke-opacity=".5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 16px center;
    border:        1px solid #ebeced;
    border-radius: 0;
    appearance:    none;
    font-size:     16px;
    line-height:   20px;
    color:         rgba(0, 0, 0, .5);
    cursor:        pointer;
}

.shop-layout {
    display:     flex;
    align-items: flex-start;
    gap:         50px;
}

.shop-filters {
    flex:           none;
    width:          25%;
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.shop-filters__group {
    background:    #ffffff;
    border-radius: 8px;
    padding:       20px;
}

.shop-filters__title {
    margin:          0 0 10px;
    font-size:       18px;
    font-weight:     500;
    line-height:     24px;
    text-transform:  uppercase;
    color:           #000000;
}

.shop-filters__list {
    margin:         0;
    padding:        0;
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.shop-filters__link {
    display:     block;
    font-size:   18px;
    font-weight: 500;
    line-height: 24px;
    color:       #000000;
}

.shop-filters__link.is-active {
    font-weight: 700;
    color:       var(--color-primary);
}

.shop-filters__checkbox {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   16px;
    font-weight: 400;
    line-height: 20px;
    color:       rgba(0, 0, 0, .5);
    cursor:      pointer;
}

.shop-filters__checkbox:hover,
.shop-filters__checkbox:has(input:checked) { color: #000000; }

.shop-filters__checkbox input {
    appearance:    none;
    flex:          none;
    width:         16px;
    height:        16px;
    margin:        0;
    background:    transparent;
    border:        1px solid #cccccc;
    border-radius: 3px;
    position:      relative;
    cursor:        pointer;
}

.shop-filters__checkbox input:checked {
    background:   #000000;
    border-color: #000000;
}

.shop-filters__checkbox input:checked::after {
    content:     '';
    position:    absolute;
    left:        50%;
    top:         50%;
    width:       8px;
    height:      5px;
    margin:      -3px 0 0 -4px;
    border:      2px solid #ffffff;
    border-top:  0;
    border-right: 0;
    transform:   rotate(-45deg);
}

.shop-filters__apply {
    margin-top:    12px;
    padding:       8px 20px;
    background:    var(--color-primary);
    color:         #ffffff;
    border:        none;
    border-radius: 6px;
    cursor:        pointer;
}

.shop-filters.is-loading { opacity: .5; pointer-events: none; }
.shop-content.is-loading { opacity: .5; }

.shop-mobile-filters-trigger,
.shop-filters__mobile-head,
.shop-filters__mobile-actions { display: none; }

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

.shop-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
}

.woocommerce-pagination { margin-top: 40px; }

.woocommerce-pagination ul {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin:          0;
    padding:         0;
    list-style:      none;
}

.woocommerce-pagination ul li { border: 0 !important; }

.woocommerce-pagination .page-numbers {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         8px;
    font-size:       18px;
    font-weight:     500;
    line-height:     24px;
    background:      transparent !important;
    border:          0 !important;
    color:           #000000 !important;
    transition:      color var(--transition);
}

.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover { color: #55ac61 !important; }

@media (max-width: 1366px) {
    .shop-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .shop-hero__title { font-size: 36px; line-height: 42px; }
    .shop-filters { width: 30%; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .shop-hero__title { font-size: 24px; line-height: 28px; }
    .shop-body { padding: 20px 0 40px; }
    .shop-toprow { justify-content: space-between; gap: 12px; margin-bottom: 20px; }
    .shop-layout { flex-direction: column; align-items: stretch; gap: 24px; }
    .shop-filters__title,
    .shop-filters__link { font-size: 16px; line-height: 20px; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }

    .shop-mobile-filters-trigger {
        display:       flex;
        align-items:   center;
        gap:           8px;
        padding:       8px 16px;
        background:    #ffffff;
        border:        1px solid var(--color-border);
        border-radius: 6px;
        font-size:     14px;
        font-weight:   500;
        color:         #000000;
        cursor:        pointer;
    }

    .shop-filters {
        position:   fixed;
        inset:      0;
        z-index:    1000;
        width:      100%;
        margin:     0;
        background: #f6f5f3;
        padding:    16px;
        overflow-y: auto;
        visibility: hidden;
        opacity:    0;
        transition: opacity var(--transition), visibility var(--transition);
    }

    .shop-filters.is-open { visibility: visible; opacity: 1; }

    .shop-filters__mobile-head {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        margin-bottom:   16px;
    }

    .shop-filters__mobile-title {
        font-size:   20px;
        font-weight: 700;
        line-height: 24px;
        color:       #000000;
    }

    .shop-filters__mobile-close {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           32px;
        height:          32px;
        background:      transparent;
        border:          none;
        font-size:       24px;
        line-height:     1;
        color:           #000000;
        cursor:          pointer;
    }

    .shop-filters__mobile-actions {
        display: flex;
        gap:     12px;
        margin-top: 4px;
    }

    .shop-filters__reset,
    .shop-filters__apply-mobile {
        flex:          1 1 0;
        padding:       12px 16px;
        border-radius: 6px;
        font-size:     16px;
        font-weight:   500;
        cursor:        pointer;
    }

    .shop-filters__reset {
        background: #ffffff;
        border:     1px solid var(--color-border);
        color:      #000000;
    }

    .shop-filters__apply-mobile {
        background: var(--color-primary);
        border:     none;
        color:      #ffffff;
    }
}

html.shop-filters-open { overflow: hidden; }