/* ==========================================================================
   상품 목록 전용 (v2) — 우리 목록 기능을 외주본 catalog 언어로.
   데이터 기반 카테고리·세부 탭(외주본 .catalog-tabs 모양), 접히는 필터(성별·사이즈·상태),
   정렬 5종 드롭다운(외주본 정렬 상자 모양), 위로 스크롤 시 상단 고정 카테고리 줄, 결과 없음.
   목록 스크립트가 만드는 이름(.catpill · .sortdd · .shop-cats--fixed …)은 그대로 둔다.
   ========================================================================== */

.catalog-controls { align-items: flex-start; }
.shop-cats { min-width: 0; }
.shop-cats__row--sub { margin-top: 10px; }
.catalog-tabs .catpill { white-space: nowrap; }
.catalog-tabs .catpill.on { background: #171717; color: #fff; }
.catalog-tabs .catpill--sub { padding: 8px 16px; color: #555; }
.catalog-tabs .catpill--sub.on { color: #fff; }

/* 위로 스크롤하면 헤더 아래에 붙는 카테고리 줄 */
.shop-cats.shop-cats--fixed {
    position: fixed;
    top: var(--wm-header-h, 88px);
    left: 0;
    right: 0;
    z-index: 19;
    padding: 12px 3.8%;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* 필터 버튼 · 정렬 — 외주본 정렬 상자(회색 테두리 네모) 모양 */
.wm-shop-tools { display: flex; gap: 10px; flex-shrink: 0; }
.wm-filter-btn,
.sortdd__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 15px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 15px;
    white-space: nowrap;
}
.wm-filter-btn[aria-expanded="true"],
.sortdd__btn[aria-expanded="true"] { border-color: #111; }
.wm-filter-count { font-weight: 650; }
.sortdd { position: relative; }
.sortdd__btn { min-width: 150px; justify-content: space-between; }
.sortdd__caret { flex-shrink: 0; }
.sortdd__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 100%;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 10px 24px #0000000d;
}
.sortdd__menu li { padding: 11px 15px; font-size: 15px; white-space: nowrap; cursor: pointer; }
.sortdd__menu li:hover { background: #f5f5f5; }
.sortdd__menu li.on { font-weight: 650; }

/* 필터 판 — 「필터」를 누르면 펼쳐진다 */
.shop-filters { display: none; }
.shop-filters.open {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 26px 40px;
    margin: -8px 0 32px;
    padding: 4px 0 30px;
    border-bottom: 1px solid #ddd;
}
.shop-filters h4 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.shop-filters label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    font-size: 15px;
    cursor: pointer;
}
.shop-filters input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: #111; }
#size-filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
#size-filter-list label { margin: 0; padding: 9px 13px; border: 1px solid #ddd; }
#size-filter-list label:has(input:checked) { border-color: #111; }
.wm-filter-foot { align-self: end; }
.wm-filter-foot .text-link { padding: 8px 0; }

/* 결과 없음 */
.shop-empty { padding: 70px 0; }
.shop-empty p { margin: 0; font-size: 15px; color: #777; }
.shop-empty .dark-button { display: inline-flex; justify-content: center; width: 220px; margin: 26px auto 0; }

@media (max-width: 767px) {
    .catalog-controls { gap: 14px; }
    .catalog-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100vw - 36px); }
    .catalog-tabs::-webkit-scrollbar { display: none; }
    .wm-shop-tools { width: 100%; }
    .wm-filter-btn { flex: 0 0 auto; }
    .sortdd { flex: 1; }
    .sortdd__btn { width: 100%; min-width: 0; }
    .shop-cats.shop-cats--fixed { padding: 10px 18px; }
    .shop-filters.open { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
}

[data-theme="dark"] .shop-cats.shop-cats--fixed,
[data-theme="dark"] .wm-filter-btn,
[data-theme="dark"] .sortdd__btn,
[data-theme="dark"] .sortdd__menu { background: #161616; color: #eee; border-color: #333; }
[data-theme="dark"] .sortdd__menu li:hover { background: #222; }
[data-theme="dark"] .catalog-tabs .catpill.on { background: #eee; color: #111; }
[data-theme="dark"] .catalog-tabs .catpill--sub { color: #bbb; }
[data-theme="dark"] .shop-filters.open,
[data-theme="dark"] #size-filter-list label,
[data-theme="dark"] .catalog-controls { border-color: #333; }
[data-theme="dark"] #size-filter-list label:has(input:checked) { border-color: #eee; }
[data-theme="dark"] .sortdd__btn[aria-expanded="true"] { border-color: #eee; }
[data-theme="dark"] .shop-filters input[type="checkbox"] { accent-color: #eee; }