.catalogControls {
    --catalog-control-ink: var(--bj-text, #17232b);
    --catalog-control-muted: #667078;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 62px;
    margin: 0;
    padding: 20px 0 0;
    border-bottom: 0;
    color: var(--catalog-control-muted);
    background: #fff;
    box-sizing: border-box;
}

.catalogControls__left,
.catalogControls__right,
.catalogControls__view {
    display: flex;
    align-items: center;
    margin: 0;
}

/* 칸은 실제로 그린 조작만큼만 — 찜 목록처럼 보기·찜 묶음이 없는 화면에서 고정 칸(max-content 104px 118px)이
   빈 118px 와 간격을 남겨 개수·정렬이 오른쪽 끝에서 132px 떨어졌다(2026-09-26). 정렬은 자기 폭(104px)을 갖는다.
   청첩장 목록 도구줄(#pl_sort_row .ui-product-sort-size-zzim-wrap)과 같은 규칙. */
.catalogControls__right {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: 14px;
}

.catalogControls__filterButton,
.catalogControls__view button,
.catalogControls__wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    border: 0;
    color: var(--catalog-control-muted);
    background: transparent;
    font: inherit;
    font-family: var(--bj-font-family, inherit);
    font-size: var(--bj-type-control, 15px);
    font-weight: var(--bj-type-control-weight, 500);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.catalogControls__filterButton {
    justify-content: flex-start;
    gap: 8px;
    min-width: 88px;
    padding: 0 14px;
    border: 1px solid #b8c0c3;
    border-radius: 8px;
    color: var(--catalog-control-ink);
}
.catalogControls__filterButton > span:not(.iconFilter) {
    flex: 0 0 auto;
    color: #1b2631;
    font-size: var(--bj-type-control, 15px);
    font-weight: var(--bj-type-control-weight, 500);
    line-height: 18px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.catalogControls__filterButton:focus-visible {
    outline: 0;
    border-color: #87939a;
    box-shadow: 0 0 0 2px rgba(19, 43, 52, .07);
}

.catalogControls__filterButton .iconFilter {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath d='M2 4h14M2 12h14' fill='none' stroke='%2353646b' stroke-width='1.25' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='4' r='1.65' fill='%23fff' stroke='%2353646b' stroke-width='1.25'/%3E%3Ccircle cx='12' cy='12' r='1.65' fill='%23fff' stroke='%2353646b' stroke-width='1.25'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 16px;
}

.catalogControls__filterButton b,
.catalogControls__wishlist b {
    min-width: 16px;
    color: #e74932;
    font-size: 12px;
}
.catalogControls__wishlist b:empty { display: none; }

.catalogControls__count {
    white-space: nowrap;
    color: var(--catalog-control-muted);
    font-family: var(--bj-font-family, inherit);
    font-size: var(--bj-type-caption, 14px);
    font-weight: 400;
    letter-spacing: -0.01em;
}
.catalogControls__count strong {
    margin-right: 2px;
    color: #1b2631;
    font-family: inherit;
    font-size: var(--bj-type-caption, 14px);
    font-weight: var(--bj-type-nav-weight, 600);
    line-height: inherit;
    letter-spacing: inherit;
}

.catalogControls__sort {
    position: relative;
    display: block;
    width: 104px;
    height: 40px;
    color: var(--catalog-control-ink);
    font-size: var(--bj-type-control, 15px);
}
.catalogControls__sort > span:not(.weddingCatalogSortTrigger__chevron) { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }
.catalogControls__sort::after { content: none; }
.catalogControls__sort .weddingCatalogSortTrigger__chevron {
    box-sizing: content-box;
    position: absolute;
    top: calc(50% - 2px);
    right: 2px;
    width: 7px;
    height: 7px;
    margin: -4px 2px 0 0;
    border-right: 1px solid #7d878d;
    border-bottom: 1px solid #7d878d;
    transform: rotate(45deg);
    pointer-events: none;
}
.catalogControls__sort select {
    box-sizing: border-box;
    width: 104px;
    max-width: 100%;
    height: 40px;
    padding: 0 2px 0 0;
    border: 0;
    border-radius: 0;
    color: #27313a;
    background: transparent;
    font: inherit;
    font-size: var(--bj-type-control, 15px);
    font-weight: var(--bj-type-control-weight, 500);
    line-height: 40px;
    appearance: none;
    cursor: pointer;
}

.catalogControlsSortControl { position: relative; display: block; width: 104px; height: 40px; }
.catalogControlsSortControl.is-enhanced > [data-catalog-sort-control] {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
.catalogControlsSortTrigger {
    appearance: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 2px 0 0;
    gap: 10px;
    border: 0;
    color: #27313a;
    background: transparent;
    font-family: var(--bj-font-family, inherit);
    font-size: var(--bj-type-control, 15px);
    font-weight: var(--bj-type-control-weight, 500);
    line-height: 40px;
    text-align: left;
    cursor: pointer;
}
.catalogControlsSortTrigger:hover { color: #111f27; }
.catalogControlsSortTrigger:focus-visible,
.catalogControlsSortControl.is-open .catalogControlsSortTrigger {
    outline: 1px solid #87939a;
    outline-offset: 2px;
}
.catalogControlsSortTrigger__value { overflow: hidden; font: inherit !important; color: inherit; line-height: inherit; letter-spacing: inherit; text-overflow: ellipsis; white-space: nowrap; }
.catalogControlsSortTrigger__chevron {
    box-sizing: content-box;
    flex: none;
    width: 7px;
    height: 7px;
    margin: -4px 2px 0 0;
    border-right: 1px solid #7d878d;
    border-bottom: 1px solid #7d878d;
    transform: rotate(45deg);
    transition: margin 150ms ease, transform 150ms ease;
}
.catalogControlsSortControl.is-open .catalogControlsSortTrigger__chevron { margin-top: 4px; transform: rotate(225deg); }
.catalogControlsSortMenu {
    box-sizing: border-box;
    position: fixed;
    z-index: 10030;
    overflow: hidden;
    padding: 6px;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(25, 32, 40, .12);
}
.catalogControlsSortMenu[hidden] { display: none !important; }
.catalogControlsSortOption {
    appearance: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0 10px;
    gap: 10px;
    border: 0;
    border-radius: 6px;
    color: #4f5b62;
    background: transparent;
    font-family: var(--bj-font-family, inherit);
    font-size: var(--bj-type-control, 15px);
    font-weight: var(--bj-type-control-weight, 500);
    line-height: 20px;
    text-align: left;
    cursor: pointer;
}
.catalogControlsSortOption:hover,
.catalogControlsSortOption.is-active { color: #27313a; background: #f6f8fa; }
.catalogControlsSortOption.is-selected { color: #1f2d35; background: #f1f5f8; font-weight: var(--bj-type-nav-weight, 600); }
.catalogControlsSortOption:focus-visible { outline: 0; color: #1f2d35; background: #f6f8fa; }
.catalogControlsSortOption__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalogControlsSortOption__check { visibility: hidden; flex: none; color: #53656e; font-size: 12px; font-weight: 600; line-height: 1; }
.catalogControlsSortOption.is-selected .catalogControlsSortOption__check { visibility: visible; }

.catalogControls__productActions { display: flex; align-items: center; width: max-content; height: 40px; gap: 14px; }
.catalogControls__view { flex: 0 0 52px; width: 52px; }
.catalogControls__view button { width: 100%; margin: 0 !important; padding: 0 5px 0 23px; color: #53656e; line-height: 40px; }
.catalogControls__view [data-catalog-view-label] { display: inline; width: auto; height: auto; font: inherit !important; color: inherit; line-height: inherit; letter-spacing: inherit; white-space: nowrap; }
.catalogControls__wishlist { flex: 0 0 52px; gap: 4px; width: 52px; padding: 0 4px; }
.catalogControls__wishlist .zzim_list_view_btn_text { position: relative; box-sizing: border-box; width: auto; padding-left: 19px; color: #53656e; font-family: var(--bj-font-family, Pretendard, sans-serif) !important; font-size: var(--bj-type-control, 15px) !important; font-weight: var(--bj-type-control-weight, 500) !important; line-height: 40px !important; letter-spacing: normal; white-space: nowrap; }
.catalogControls__wishlist .zzim_list_view_btn_text::before { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; background: url('/card/img/product_list_heart_off.png') center / 15px no-repeat; transform: translateY(-50%); content: ""; }
.catalogControls__wishlist .zzim_list_view_btn_count { display: inline-block; min-width: 16px; color: #e74932; font-size: 12px; font-weight: 700; line-height: normal; }
.catalogControls__wishlist .zzim_list_view_btn_count:empty { display: none; }
.catalogControls__wishlist.is-active { color: #d94a45; }
.catalogControls__wishlist.is-active .zzim_list_view_btn_text::before { background-image: url('/card/img/product_list_heart_on.png'); }

/* PC: the invitation catalog's filter expands inside document flow. */
.catalogControls__overlay { display: none; }
.catalogControls__panel {
    flex: 0 0 100%;
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    margin: 14px 0 0;
    border-top: 1px solid #e8e4df;
    background: #fff;
    box-shadow: none;
}
.catalogControls__panel[hidden] { display: none; }
.catalogControls__panel form { display: flex; flex-direction: column; min-height: 0; }
.catalogControls__panelHeader {
    display: none;
}
.catalogControls__panelBody {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 28px;
    margin: 0;
    padding: 20px 0 18px;
    overflow-y: auto;
}
.catalogControls__facet { min-width: 0; margin: 0; padding: 0; border: 0; }
.catalogControls__facet legend { margin: 0 0 13px; color: var(--catalog-control-ink); font-size: 15px; font-weight: 700; }
.catalogControls__options { display: grid; gap: 4px; margin: 0; }
.catalogControls__option { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; min-height: 40px; margin: 0; cursor: pointer; }
.catalogControls__option input { width: 17px; height: 17px; margin: 0; accent-color: #17232b; }
.catalogControls__option span { color: #303a40; font-size: 14px; }
.catalogControls__option small { color: #8a9195; font-size: 12px; }
.catalogControls__option.is-disabled { opacity: .42; cursor: default; }
.catalogControls__facet--keyword { grid-column: 1 / -1; margin-bottom: 28px; }
.catalogControls__facet--shape { grid-column: span 2; }
.catalogControls__facet--color { grid-column: span 2; }
.catalogControls__facet--keyword .catalogControls__options,
.catalogControls__facet--shape .catalogControls__options,
.catalogControls__facet--color .catalogControls__options { display: flex; flex-wrap: wrap; gap: 6px; }
.catalogControls__facetAll,
.catalogControls__facet--keyword .catalogControls__option,
.catalogControls__facet--shape .catalogControls__option {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #dfe4e7;
    border-radius: 6px;
    color: #536068;
    background: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.catalogControls__facetAll.is-active,
.catalogControls__facet--keyword .catalogControls__option:has(input:checked),
.catalogControls__facet--shape .catalogControls__option:has(input:checked) { border-color: #17232b; color: #17232b; }
.catalogControls__facet--keyword .catalogControls__option input,
.catalogControls__facet--shape .catalogControls__option input,
.catalogControls__facet--color .catalogControls__option input { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }
.catalogControls__facet--keyword .catalogControls__option span,
.catalogControls__facet--shape .catalogControls__option span { color: inherit; font-size: inherit; white-space: nowrap; }
.catalogControls__facet--color .catalogControls__facetAll { min-width: 52px; }
.catalogControls__facet--color .catalogControls__option {
    position: relative;
    display: block;
    width: 28px;
    min-height: 28px;
    margin: 4px 2px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--catalog-option-swatch, #fff);
    cursor: pointer;
}
.catalogControls__facet--color .catalogControls__option:first-of-type { border-color: #d6dadd; }
.catalogControls__facet--color .catalogControls__option:has(input:checked)::after {
    position: absolute;
    inset: -4px;
    border: 2px solid #17232b;
    border-radius: 8px;
    content: '';
}
.catalogControls__facet--color .catalogControls__option:has(input:checked)::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    color: #17232b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    content: '✓';
}
.catalogControls__facet--color .catalogControls__option span { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }
.catalogControls__panelFooter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 10px 0 18px;
    border-top: 1px solid #eeeae5;
}
.catalogControls__panelFooter a,
.catalogControls__panelFooter button { display: inline-flex; align-items: center; justify-content: center; height: 48px; border-radius: 5px; font-size: 14px; font-weight: 700; text-decoration: none; }
.catalogControls__panelFooter a { width: 92px; border: 1px solid #cfd5d8; color: #46545b; }
.catalogControls__panelFooter button { width: 220px; border: 1px solid #17232b; color: #fff; background: #17232b; cursor: pointer; }

/* Mobile catalog controls share the wedding catalog hierarchy and image edges. */
@media (max-width: 767px) {
    .catalogControls { box-sizing: border-box !important; height: 56px; min-height: 56px; flex-wrap: nowrap; align-items: center; padding: 0; font-family: var(--bj-font-family); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .catalogControls__right { display: flex; gap: var(--bj-space-2); margin-left: auto; }
    .catalogControls__count,
    .catalogControls__view { display: none; }
    .catalogControls__filterButton { position: relative; justify-content: center; width: 44px; min-width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0; border-radius: 0; color: var(--bj-brand-navy); }
    .catalogControls__filterButton .iconFilter { flex-basis: 24px; width: 24px; height: 16px; background-image: url('/card/img/product_list_icon_filter.png'); background-size: 24px auto; }
    .catalogControls__filterButton > span:not(.iconFilter) { position: absolute; overflow: hidden; width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; }
    .catalogControls__filterButton b { position: absolute; top: 0; right: -4px; font-size: 12px; }
    .catalogControls__sort { width: auto; height: 44px; }
    .catalogControls__sort select { width: auto; height: 44px; padding-right: 22px; font-family: var(--bj-font-family); font-size: var(--bj-catalog-toolbar-size); font-weight: var(--bj-type-control-weight); line-height: 44px; }
    .catalogControls__sort .weddingCatalogSortTrigger__chevron { right: 2px; }
    .catalogControlsSortControl { width: auto; min-width: 64px; height: 44px; }
    .catalogControlsSortTrigger { width: auto; min-width: 64px; height: 44px; padding: 0; gap: var(--bj-space-1); color: var(--bj-brand-navy); font-size: var(--bj-catalog-toolbar-size); font-weight: var(--bj-type-control-weight); line-height: 44px; }
    .catalogControlsSortOption { min-height: 44px; font-size: var(--bj-catalog-toolbar-size); }
    .catalogControls__productActions { width: auto; height: 44px; gap: 0; }
    .catalogControls__wishlist { flex: 0 0 auto; justify-content: flex-end; width: auto; min-width: 44px; height: 44px; padding: 0; color: var(--bj-brand-navy); font-size: var(--bj-catalog-toolbar-size); font-weight: var(--bj-type-control-weight); }
    .catalogControls__wishlist .zzim_list_view_btn_text { position: static; display: inline-flex; overflow: visible; align-items: center; justify-content: flex-end; gap: calc(var(--bj-space-1) / 2); width: auto; height: 44px; padding: 0; color: inherit; font-size: var(--bj-catalog-toolbar-size) !important; font-weight: var(--bj-type-control-weight) !important; line-height: 44px !important; white-space: nowrap; }
    .catalogControls__wishlist .zzim_list_view_btn_text::before { display: none; content: none; }
    .catalogControls__wishlist .zzim_list_view_btn_icon { display: none; }
    .catalogControls__wishlist .zzim_list_view_btn_name_text { position: static; overflow: visible; width: auto; height: auto; margin: 0; padding: 0; clip: auto; clip-path: none; font: inherit; letter-spacing: normal; white-space: nowrap; }
    .catalogControls__wishlist .zzim_list_view_btn_counter:not(:empty) { box-sizing: border-box; position: static; overflow: visible; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; clip: auto; clip-path: none; border: 0; border-radius: 0; color: var(--bj-accent); background: transparent; font-family: var(--bj-font-family); font-size: var(--bj-catalog-toolbar-size); font-weight: var(--bj-type-nav-weight); line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
    .catalogControls__wishlist .zzim_list_view_btn_counter:empty { display: none; }

    .catalogControls__overlay {
        display: block;
        position: fixed;
        z-index: 1300;
        inset: 0;
        margin: 0;
        background: rgba(14, 25, 31, .36);
    }
    .catalogControls__overlay[hidden] { display: none; }
    .catalogControls__panel {
        position: fixed;
        z-index: 1310;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-height: calc(100dvh - 72px);
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 16px 16px 0 0;
        background: #fff;
        box-shadow: 0 -12px 32px rgba(16, 30, 38, .14);
    }
    .catalogControls__panel form { display: flex; height: auto; max-height: calc(100dvh - 72px); min-height: 0; }
    .catalogControls__panelHeader {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 52px;
        height: 52px;
        padding: 0;
        border: 0;
    }
    .catalogControls__panelHeader h2 { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }
    .catalogControls__panelHeader button { width: 52px; height: 52px; border: 0; color: #17232b; background: transparent; font-size: 27px; cursor: pointer; }
    .catalogControls__panelBody { display: block; overflow-y: auto; flex: 0 1 auto; min-height: 0; padding: 0 20px 18px; }
    .catalogControls__facet { padding: 0 0 18px; border-bottom: 1px solid #eeeae5; }
    .catalogControls__facet + .catalogControls__facet { padding-top: 18px; }
    .catalogControls__facet--keyword { margin-bottom: 0; }
    .catalogControls__panelFooter { flex: 0 0 auto; gap: 10px; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 0; }
    .catalogControls__panelFooter a { width: 92px; }
    .catalogControls__panelFooter button { flex: 1; width: auto; }
    html.is-catalog-filter-open { overflow: hidden; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    .catalogControls__panel { animation: catalogControlsSheetIn .18s ease-out; }
    @keyframes catalogControlsSheetIn { from { transform: translateY(18px); opacity: .65; } }
}