/* Catalog filter controls.  The archived site uses the same compact pills on
   desktop and the two-button toolbar on mobile. */
.j-filters-sidebar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    z-index: 4;
    margin: 1px 0 0;
    width: 100%;
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
}
.j-filters-sidebar .jc-filter-dropdown { position: relative; flex: 0 0 auto; min-width: 0; height: 40px; }
.j-filters-sidebar .jc-filter-dropdown:nth-child(1) { width: 134px; }
.j-filters-sidebar .jc-filter-dropdown:nth-child(2) { width: 72px; }
.j-filters-sidebar .jc-filter-dropdown:nth-child(3) { width: 168px; }
.j-filters-sidebar .jc-filter-dropdown:nth-child(4) { width: 213px; }
.j-filters-sidebar .jc-filter-dropdown:nth-child(5) { width: 117px; }
.j-filters-sidebar .jc-filter-dropdown:nth-child(6) { width: 108px; }
.j-filters-sidebar .jc-filter-dropdown:nth-child(7) { width: 82px; }
.j-filters-sidebar details > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: nowrap;
    height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(139,111,93,.4); border-radius: 37px;
    background: #fff; color: #8b6f5d; font-family: Montserrat,sans-serif; font-size: 12px; font-weight: 500;
    line-height: 130%; text-transform: uppercase; white-space: nowrap;
}
.j-filters-sidebar details > summary::-webkit-details-marker { display: none; }
.j-filters-sidebar details > summary::after,
.jc-mobile-toolbar button::after {
    content: ""; display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; transform: rotate(-45deg);
    border-left: 1px solid #8b6f5d; border-bottom: 1px solid #8b6f5d; margin-left: 6px; position: relative; top: -2px;
}
.j-filters-sidebar details[open] > summary { border-color: #966bce; }
@media (min-width: 768px) {
    .j-filters-sidebar .jc-filter-dropdown:first-child { margin-right: 12px; }
    .j-filters-sidebar .jc-filter-dropdown:first-child::after {
        content: ""; position: absolute; top: 6px; right: -12px; width: 2px; height: 28px; box-sizing: border-box; border: 1px solid #e6e2e0;
    }
}
.jc-filter-panel {
    position: absolute; top: calc(100% + 8px); left: 0; width: 338px; min-width: 230px; max-width: calc(100vw - 32px);
    overflow: visible; padding: 24px; box-sizing: border-box; background: #fff; border: 0; border-radius: 8px; box-shadow: 0 2px 6px #0003; z-index: 20;
}
/* The original list is anchored to the left edge of each pill.  Let it
   overflow the catalog row when a narrow viewport wraps the toolbar; right
   anchoring moves the last pills off-screen and makes their controls
   impossible to reach. */
.jc-filter-dropdown .jc-filter-panel { left: 0; right: auto; }
.jc-price-panel { display: flex; gap: 8px; }
.jc-price-panel label { display: grid; gap: 4px; font-size: 12px; }
.jc-price-panel input { width: 94px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.jc-filter-list { display: grid; gap: 0; margin: 16px 0; padding: 0; max-height: 250px; overflow: auto; }
.jc-filter-options { display: block; }
.jc-filter-options > .jc-filter-list { display: grid; gap: 9px; }
.jc-sort-panel > .jc-filter-list { gap: 8px; }
.jc-sort-panel .jc-filter-list > label { display: flex; gap: 8px; align-items: center; font-family: Montserrat,sans-serif; font-size: 14px; line-height: 130%; color: #372720; }
.jc-sort-panel input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.jc-sort-panel label span { position: relative; display: block; padding-left: 26px; }
.jc-sort-panel label span::before { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; }
.jc-sort-panel input:checked + span::before { content: "✓"; color: #5ac36b; font-size: 16px; font-weight: 700; line-height: 12px; }
.jc-filter-panel-title { margin: 0; color: #372720; font-family: Montserrat,sans-serif; font-size: 14px; font-weight: 700; line-height: 17px; }
.jc-filter-options label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; white-space: normal; }
.jc-filter-options input { accent-color: #966bce; }
.jc-filter-options .position-line { display: flex; justify-content: space-between; position: relative; margin: 16px 0 32px; max-height: none; overflow: visible; list-style: none; }
.jc-filter-options .position-line::before { content: ""; position: absolute; top: 10px; right: 0; left: 0; height: 4px; border-radius: 14px; background: #e9e5e3; }
.jc-filter-options .position-line li { position: relative; min-width: 54px; }
.jc-filter-options .position-line input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; overflow: hidden; }
.jc-filter-options .position-line label { position: relative; display: block; padding: 24px 0 0; color: rgba(55,39,32,.5); font-size: 12px; line-height: 130%; text-align: center; }
.jc-filter-options .position-line label::before { content: ""; position: absolute; top: 8px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #e9e5e3; }
.jc-filter-options .position-line input:checked + label::after { content: ""; position: absolute; top: 3px; left: calc(50% - 9px); width: 18px; height: 18px; border: 5px solid #5ac36b; border-radius: 50%; background: #fff; }
.jc-filter-options small { color: #777; margin-left: auto; }
.jc-filter-unavailable { color: #777; font-size: 12px; white-space: nowrap; }
.jc-filter-section-title { margin: 2px 0 8px; color: #4f3f34; font-size: 12px; font-weight: 700; }
.jc-sort-panel { min-width: 270px; }
.jc-sort-panel > label { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; }
.jc-filter-panel select { width: 100%; padding: 9px; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.jc-taste-panel { min-width: 210px; }
.jc-panel-actions { display: flex; flex-direction: column; gap: 0; margin-top: 0; padding-top: 16px; border-top: 1px solid #eee; }
.jc-panel-actions button { height: 40px; border: 0; border-radius: 25px; font-family: Montserrat,sans-serif; font-size: 12px; text-transform: uppercase; cursor: pointer; }
.jc-panel-actions .j-filter-apply { background: #5ac36b; color: #fff; }
.jc-panel-actions .j-filter-reset { border: 0 !important; color: #5ac36b; background: transparent; }
.jc-filter-actions { display: none; align-items: center; gap: 10px; margin-left: auto; height: 40px; }
.jc-filter-actions button { height: 40px; padding: 0 14px; border: 0; border-radius: 37px; cursor: pointer; font-size: 12px; text-transform: uppercase; }
.j-filter-apply, .j-filters-apply { background: #966bce; color: #fff; }
.j-filter-reset, .j-filters-reset { border: 1px solid rgba(139,111,93,.4) !important; background: #fff; color: #4f3f34; }
.filters-mobile-modal[hidden] { display: none !important; }
.filters-mobile-modal { position: fixed; inset: 0; overflow: auto; z-index: 1200; background: #fff; }
.filters-mobile-header { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #eee; }
.filters-mobile-header button { border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }
.filters-mobile-header h3 { margin: 0; font-size: 20px; }
.filters-mobile-content { padding: 8px 16px 96px; }
.jc-filter-mobile-group { padding: 18px 0; border-bottom: 1px solid #eee; }
.jc-filter-mobile-group h4 { margin: 0 0 14px; font-size: 16px; }
.jc-filter-mobile-group .jc-filter-options { gap: 14px; }
.filters-mobile-footer { position: fixed; right: 0; bottom: 0; left: 0; display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #ddd; background: #fff; }
.filters-mobile-footer button { flex: 1; border: 0; border-radius: 5px; padding: 12px 16px; cursor: pointer; font-size: 13px; }
.filters-mobile-modal .jc-filter-panel { position: static; box-shadow: none; border: 0; padding: 0; }
.filters-mobile-modal .jc-filter-options select { width: 100%; }
.filters-mobile-modal .jc-filter-section-title { margin-top: 12px; }
.j-filters-sidebar input[type="radio"], .j-filters-sidebar input[type="checkbox"], .filters-mobile-modal input[type="radio"], .filters-mobile-modal input[type="checkbox"] {
    position: static !important; width: 16px !important; height: 16px !important; flex: 0 0 16px; margin: 0; opacity: 1 !important; visibility: visible !important; clip: auto !important; clip-path: none !important; appearance: auto; accent-color: #5ac36b;
}
.j-filters-sidebar .jc-sort-panel input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0 !important; }
.j-filters-sidebar label, .filters-mobile-modal label { cursor: pointer; }
.j-filters-sidebar summary:focus-visible, .j-filters-sidebar input:focus-visible, .filters-mobile-modal input:focus-visible, .filters-mobile-modal select:focus-visible { outline: 2px solid #966bce; outline-offset: 3px; }
.jc-mobile-sort-trigger { display: none; }
@media (max-width: 767px) {
    .j-filters-sidebar, .sorting { display: none !important; }
    .mobile-filters-button { display: block !important; margin: 0 16px 16px; }
    .mobile-filters-button .filters-open-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 1px solid #966bce; border-radius: 5px; cursor: pointer; }
    .jc-mobile-toolbar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; height: 58px; margin: 24px 0 0; align-items: start; }
    .jc-mobile-toolbar button {
        width: 100%; height: 40px; min-width: 0; box-sizing: border-box; margin: 10px 0 8px; padding: 0 12px; overflow: hidden;
        border: 1px solid rgba(139,111,93,.4); border-radius: 37px; background: #fff; color: #8b6f5d; font-family: Montserrat,sans-serif;
        font-size: 12px; font-weight: 500; line-height: 130%; text-align: left; text-transform: uppercase; white-space: nowrap;
    }
    .jc-mobile-toolbar .filters-open-btn { cursor: pointer; }
    .jc-mobile-toolbar ~ .express-block { display: block !important; height: 42.203125px; margin: 0 !important; }
    .express-block .j-mobile { height: 42.203125px; }
    .express-block .compact-mode { display: block; height: 18.203125px; margin: 16px 0 8px !important; font-size: 14px; line-height: 130%; }
    /* The hidden desktop form leaves one inherited 23.36px anonymous line
       between the compact switcher and the product list in this Blade DOM. */
    .express-block + .j-filters-sidebar + .product-list { margin-top: -23.359375px !important; }
    .jc-mobile-sort-trigger { display: block; width: calc(50% - 21px); height: 40px; margin: 0 6px 10px 16px; padding: 0 12px; border: 1px solid rgba(139,111,93,.4); border-radius: 37px; background: #fff; color: #8b6f5d; text-align: left; text-transform: uppercase; }
}
@media (min-width: 768px) { .filters-mobile-modal, #j-popup-filter-checkbox { display: none !important; } }
@media (min-width: 768px) and (max-width: 1100px) {
    /* The original preloader is a zero-width flex item with horizontal margins.
       It forces a second toolbar row at 1024px and reserves that row at 768px. */
    .j-filters-sidebar::after { content: ""; flex: 0 0 34px; height: 40px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .filters-wrapper { overflow: hidden; }
    .filters-wrapper .filters { max-width: 100%; overflow: hidden; }
    .filters-wrapper .filter-block { min-width: 0; }
    .filters-wrapper .information { overflow-wrap: anywhere; }
}