/* BASIC css start */
/* ============================================================
   쿠션이야기 분류 페이지   전용 스타일 (프리미엄 최종본 v8)
   필터 사이드바 폭 축소 + 체크박스 리스트 컴팩트화
   ============================================================ */

:root {
  --brand-accent: #ff3d78;
  --brand-accent-deep: #e01a5c;
  --card-radius: 12px;
  --ui-radius: 4px;
}

body #contentWrap {width:1400px;}
body .item-wrap {width:100%; margin-top:20px;}
body .page-body {padding-bottom:140px;}

/* ===== 카테고리 헤더 : 완전 숨김 ===== */
#productClass .cate-wrap .eyebrow,
#productClass .cate-wrap .bcate {display:none !important;}
#productClass .cate-wrap {padding:0;}
.class-list {display:none !important;}

/* ===== 베스트 아이템 ===== */
.best-wrap {margin-bottom:88px; margin-top:32px;}
.cateTit.best-head {
  padding:0 0 18px; margin-bottom:28px;
  display:flex; align-items:baseline; gap:10px; text-align:left;
}
.cateTit.best-head h3 {font-size:19px; font-weight:500; margin:0;}
.cateTit.best-head .best-sub {font-size:12px; color:var(--light_txt); font-weight:400;}

.best-item .best-track {
  overflow-x:auto;
  overflow-y:hidden;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000,#000 calc(100% - 40px),transparent);
}
.best-item .best-track::-webkit-scrollbar {display:none;}
.best-item .best-track.dragging {cursor:grabbing; user-select:none;}

.best-item .best-track-inner {
  display:flex !important;
  gap:18px;
  width:max-content;
  list-style:none;
  margin:0; padding:2px 0 8px;
}
.best-item .best-track-inner > *:not(li) {display:contents;}
.best-item .best-track-inner li {
  width:220px;
  flex:0 0 220px;
  list-style:none;
  display:block;
  transition:transform .25s ease;
}
.best-item .best-track-inner li:not([aria-hidden]):hover {transform:translateY(-4px);}

@media (max-width:1023px) {
  .best-item .best-track-inner li {width:170px; flex:0 0 170px;}
}

/* ===== 베스트 순위 뱃지 : BEST 1 / BEST 2 / BEST 3 필(pill) 라벨 ===== */
.best-item .best-track-inner li .imgWrap {position:relative;}

.best-item .best-track-inner li:nth-child(1):not([aria-hidden]) .imgWrap::before,
.best-item .best-track-inner li:nth-child(2):not([aria-hidden]) .imgWrap::before,
.best-item .best-track-inner li:nth-child(3):not([aria-hidden]) .imgWrap::before {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 20px;
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.best-item .best-track-inner li:nth-child(1):not([aria-hidden]) .imgWrap::before {
  content: 'BEST 1';
  background: linear-gradient(120deg, var(--brand-accent), var(--brand-accent-deep));
}
.best-item .best-track-inner li:nth-child(2):not([aria-hidden]) .imgWrap::before {
  content: 'BEST 2';
  background: #1c1c1c;
}
.best-item .best-track-inner li:nth-child(3):not([aria-hidden]) .imgWrap::before {
  content: 'BEST 3';
  background: #6b6b6b;
}

/* ===== 카드 공통 (베스트 + 상품 그리드 공용) ===== */
.prdList ul li .imgWrap {
  position:relative;
  aspect-ratio:3/4;
  background:#f7f6f4;
  border-radius:var(--card-radius);
  overflow:hidden;
  margin-bottom:16px;
  display:block;
}
.prdList ul li .imgWrap img {width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1); pointer-events:none;}
/* .prdList ul li a:hover .imgWrap img {transform:scale(1.045);} */
.prdList ul li .imgWrap.soldout img {filter:grayscale(1); opacity:.5;}

.prdList ul li .textWrap {display:flex; flex-direction:column; padding:0 2px;}
.prdList ul li .prdIcon {display:none;}

.prdList ul li .prdName {
  order:1;
  font-size:13.5px; font-weight:600; color:var(--txt);
  line-height:1.45; margin:0 0 7px; letter-spacing:-.01em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;
}

.prdList ul li .prdPrice {
  order:2;
  font-size:15px; font-weight:700; color:var(--txt);
  margin:0 0 8px; display:flex; align-items:baseline; gap:5px;
}
.prdList ul li .prdPrice .discountPer {color:var(--brand-accent-deep); font-weight:800; font-size:14px;}
.prdList ul li .prdPrice .c_price {font-size:12px; text-decoration:line-through; color:var(--light_txt); font-weight:500;}

.prdList ul li .prdSubName {
  order:3;
  font-size:11.5px; color:var(--light_txt); line-height:1.6; margin:0 0 10px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis;
}

/* 리뷰   순서만 맨 아래로, 스타일은 기본값 */
.prdList ul li .textWrap > * {
  order:4;
}
.prdList ul li .textWrap .prdName,
.prdList ul li .textWrap .prdPrice,
.prdList ul li .textWrap .prdSubName {
  order:unset;
}

.prdList ul li .wishIcon {position:absolute; top:0; right:0; width:15px; padding:12px; z-index:2;}
.prdList ul li .wishIcon img {display:block;}
.prdList ul li .wishIcon img.on {display:none;}
.prdList ul li .wishIcon .wish-on img {display:none;}
.prdList ul li .wishIcon .wish-on img.on {display:block;}

.prdList ul li .soldout_txt {
  position:absolute; inset:0; background:rgba(18,18,18,.55); border-radius:var(--card-radius);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.06em; z-index:2;
}
.prdList ul li .soldout {position:relative;}

/* ===== 일반 상품 그리드 ===== */
#productClass .prdList.basic ul {display:block;}
#productClass .prdList.basic #MS_product {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:52px 22px;
  align-items:stretch;
}
#productClass .prdList.basic #MS_product > li {
  width:auto; list-style:none; display:flex; flex-direction:column;
  transition:transform .25s ease;
}
#productClass .prdList.basic #MS_product > li:hover {transform:translateY(-3px);}
#productClass .prdList.basic #MS_product > li > a {display:flex; flex-direction:column; flex:1;}
#productClass .prdList.basic #MS_product > li .textWrap {flex:1;}

/* ===== 필터 레이아웃 : 왼쪽 사이드바 (폭 축소 + 컴팩트화) ===== */
.filter-layout {display:flex; align-items:flex-start; gap:44px;}
.filter-main {flex:1; min-width:0;}
.filter-sidebar {width:210px; flex:0 0 210px; position:sticky; top:24px;}
.btn-filter-mobile {display:none;}

.filter-wrap .layer-filter {background:#fff;}
.filter-wrap .tit {
  display:flex; align-items:baseline; gap:8px;
  padding-bottom:16px; margin-bottom:6px; border-bottom:2px solid var(--txt);
}
.filter-wrap .tit h3 {font-size:15px; font-weight:800; letter-spacing:.08em; margin:0;}
.filter-wrap .tit .total-count {font-size:12px; color:var(--light_txt); font-weight:400;}
.filter-wrap .tit .total-count:not(:empty)::before {content:'· ';}
.filter-wrap .tit .btn-close {display:none;}

.opt-box {list-style:none; margin:0; padding:0;}
.opt-box > li {border-bottom:1px solid #f0eee9; list-style:none;}
.opt-box > li > .opt-name {
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 2px; font-size:13.5px; font-weight:700; color:var(--txt);
  cursor:pointer; user-select:none; letter-spacing:-.01em;
  transition:color .15s ease;
}
.opt-box > li > .opt-name:hover {color:var(--brand-accent-deep);}
.opt-box > li > .opt-name::after {
  content:''; width:7px; height:7px;
  border-right:1.5px solid #999; border-bottom:1.5px solid #999;
  transform:rotate(45deg); transition:transform .2s ease, border-color .15s ease; margin-right:2px;
}
.opt-box > li.active > .opt-name::after {transform:rotate(-135deg); margin-top:4px; border-color:var(--txt);}
.opt-box > li > .opt-body {max-height:0; overflow:hidden; transition:max-height .3s ease;}
.opt-box > li.active > .opt-body {max-height:600px; padding-bottom:18px;}

/* 체크박스형 필터   폭 축소, 줄간격 타이트 */
.opt-box .opt-body.chk-box {
  display:grid; grid-template-columns:16px 1fr;
  column-gap:9px; row-gap:0; align-items:center; padding-top:2px;
}
.opt-box .opt-body.chk-box input[type="checkbox"],
.opt-box .opt-body.chk-box input[type="radio"] {
  width:15px; height:15px; accent-color:var(--txt); cursor:pointer; margin:0;
}
.opt-box .opt-body.chk-box input[type="checkbox"]:checked,
.opt-box .opt-body.chk-box input[type="radio"]:checked {accent-color:var(--brand-accent-deep);}
.opt-box .opt-body.chk-box a,
.opt-box .opt-body.chk-box label,
.opt-box .opt-body.chk-box span {
  font-size:13px; color:#333 !important; text-decoration:none;
  line-height:1.9; padding:1px 4px; border-radius:3px;
  transition:background .15s ease, color .15s ease;
}
.opt-box .opt-body.chk-box a:hover {background:#faf7f8; color:var(--brand-accent-deep) !important; text-decoration:none;}
.opt-box .opt-body.chk-box br {display:none;}

/* 색상형 필터 */
.opt-box .opt-body.chk-color-code {display:flex; flex-wrap:wrap; gap:14px 12px; padding-top:6px;}
.opt-box .opt-body.chk-color-code > * {
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; width:38px; text-align:center;
}
.opt-box .opt-body.chk-color-code a {font-size:10.5px; color:var(--light_txt) !important; text-decoration:none;}
.opt-box .opt-body.chk-color-code input[type="checkbox"],
.opt-box .opt-body.chk-color-code input[type="radio"] {accent-color:var(--txt); width:15px; height:15px;}
.opt-box .opt-body.chk-color-code font {
  display:inline-block; width:26px; height:26px; border-radius:50%;
  font-size:0; box-shadow:0 0 0 1px #ececec; vertical-align:middle;
  transition:box-shadow .15s ease;
}
.opt-box .opt-body.chk-color-code input:checked ~ font {
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--brand-accent);
}

.select-filter {list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 0; padding:0;}
.select-filter li {
  display:flex; align-items:center; gap:6px;
  padding:6px 11px; border:none; background:#f4f2ef; border-radius:20px;
  font-size:11.5px; font-weight:500; color:#333;
}
.select-filter .filter-text {font-size:11.5px; font-weight:500; color:#333;}
.select-filter .btn-del {border:none; background:none; padding:0; margin:0; font-size:0; cursor:pointer; line-height:1;}
.select-filter .btn-del::after {content:'×'; font-size:13px; color:#999;}
.select-filter .btn-del:hover::after {color:var(--brand-accent-deep);}

/* 초기화 / 상품검색 버튼   높이 축소 */
.filter-wrap .btn-wrap {display:flex; gap:8px; margin-top:20px;}
.filter-wrap .btn-wrap button {
  flex:1; height:42px; border:1px solid var(--txt); background:#fff;
  border-radius:var(--ui-radius);
  cursor:pointer; transition:all .18s ease;
  text-indent:0 !important; overflow:visible !important; white-space:normal !important; position:static !important;
}
.filter-wrap .btn-wrap button,
.filter-wrap .btn-wrap button span {
  visibility:visible !important;
  font-size:12.5px !important; font-weight:700 !important; color:inherit !important;
  line-height:1 !important; display:inline-block !important; letter-spacing:.02em;
}
.filter-wrap .btn-reset, .filter-wrap .btn-reset span {color:var(--txt) !important;}
.filter-wrap .btn-reset {background:#fff !important;}
.filter-wrap .btn-reset:hover {background:var(--txt) !important; color:#fff !important;}
.filter-wrap .btn-reset:hover span {color:#fff !important;}
.filter-wrap .btn-search, .filter-wrap .btn-search span {color:#fff !important;}
.filter-wrap .btn-search {background:var(--txt) !important; border-color:var(--txt) !important;}
.filter-wrap .btn-search:hover {background:var(--brand-accent-deep) !important; border-color:var(--brand-accent-deep) !important;}

/* ===== 정렬바 ===== */
#productClass .total-sort {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:20px; margin-bottom:30px; border-bottom:1px solid #f0eee9;
}
#productClass .item-total {font-size:13px; color:var(--light_txt);}
#productClass .item-total b {color:var(--txt); font-weight:700;}
#productClass .trxSchOrd select {
  height:34px; padding:0 30px 0 14px; border:1px solid #ddd; border-radius:var(--ui-radius);
  background:#fff url(//skin.makeshop.co.kr/skin/fragrance/pc/img/sel_down.png) no-repeat 93% center;
  font-size:12.5px; color:#333; appearance:none; cursor:pointer;
  transition:border-color .15s ease;
}
#productClass .trxSchOrd select:hover {border-color:#999;}

/* ===== 하위 분류(item-cate/item-cont) ===== */
#productClass .item-cate {display:flex; justify-content:space-between; align-items:end; padding:40px 0 22px; border-top:1px solid #f0eee9;}
#productClass .item-cate:first-child {border-top:0; padding-top:0;}
#productClass .item-cate .scate a {font-size:18px; font-weight:800; color:var(--txt); letter-spacing:-.02em;}
#productClass .item-cate .scate-more a {font-size:12px; color:var(--light_txt); transition:color .15s ease;}
#productClass .item-cate .scate-more a:hover {color:var(--brand-accent-deep);}

#productClass .item-cont {display:flex; flex-wrap:wrap; gap:44px 22px; margin-bottom:8px; width:100%;}
#productClass .item-cont .item-list {width:calc((100% - 44px) / 3); text-align:left; padding-right:0; transition:transform .25s ease;}
#productClass .item-cont .item-list:hover {transform:translateY(-3px);}
#productClass .item-cont .item-list .thumb {
  position:relative; aspect-ratio:3/4; border-radius:var(--card-radius); overflow:hidden;
  background:#f7f6f4; margin-bottom:16px; width:100%; height:100%;
}
#productClass .item-cont .item-list .thumb img {width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1);}
#productClass .item-cont .item-list a:hover img {transform:scale(1.045);}
#productClass .item-cont .item-list .prd-info {display:flex; flex-direction:column; padding:0 2px;}
#productClass .item-cont .item-list .prd-ico {display:none;}
#productClass .item-cont .item-list .prd-name {order:1; margin:0 0 7px;}
#productClass .item-cont .item-list .prd-name a {
  font-size:13.5px; font-weight:600; color:var(--txt); line-height:1.45; letter-spacing:-.01em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;
}
#productClass .item-cont .item-list .prd-price {order:2; margin:0 0 6px; font-size:15px; font-weight:700; color:var(--txt);}
#productClass .item-cont .item-list .prd-price strike {font-size:12px; font-weight:500; color:var(--light_txt); margin-right:4px;}
#productClass .item-cont .item-list .prd-color {order:3; margin:0 0 6px; font-size:0;}
#productClass .item-cont .item-list .prd-color font {display:inline-block; width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 1px #ececec; margin-right:4px; font-size:0;}
#productClass .item-cont .item-list .prd-wish {order:4; margin-top:0;}
#productClass .item-cont .item-list .prd-wish i.fa {color:#c8c8c8; font-size:18px;}
#productClass .item-cont .item-list .prd-wish i.fa-heart {display:none; color:var(--brand-accent);}
#productClass .item-cont .item-list .prd-wish .wish-on i.fa-heart {display:inline-block;}
#productClass .item-cont .item-list .prd-wish .wish-on i.fa-heart-o {display:none;}

/* ===== 더보기 ===== */
#productClass .more {
  display: flex;
  align-items: center;
  justify-content: center;
  width:280px; height:54px; border:1px solid var(--txt); border-radius:var(--ui-radius);
  margin:88px auto 0; transition:all .2s ease;
}
#productClass .more:hover {background:var(--txt);}
#productClass .more a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%; height: 100%;
  color:var(--txt); font-size:13px; font-weight:700; letter-spacing:.05em; line-height:1;
}
#productClass .more:hover a {color:#fff;}
#productClass .more a img {vertical-align:middle;}

/* ===== 반응형 ===== */
@media (max-width:1023px) {
  body #contentWrap {width:100%; padding:0 20px;}

  .filter-layout {flex-direction:column;}
  .btn-filter-mobile {
    display:block; margin-bottom:20px; padding:13px 20px; border-radius:var(--ui-radius);
    background:var(--txt); color:#fff; border:none; font-size:13px; font-weight:700; cursor:pointer; letter-spacing:.05em;
  }
  .filter-sidebar {
    width:280px; flex:none; position:fixed; top:0; left:0; height:100%;
    background:#fff; z-index:200; padding:24px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .28s ease; box-shadow:0 0 30px rgba(0,0,0,.1);
  }
  .filter-sidebar.open {transform:translateX(0);}
  .filter-wrap .tit .btn-close {
    display:block; border:none; background:none; font-size:13px; color:var(--light_txt); cursor:pointer;
  }

  #productClass .prdList.basic #MS_product {grid-template-columns:repeat(2, 1fr); gap:36px 16px;}
  #productClass .item-cont .item-list {width:calc((100% - 16px) / 2);}
  .best-item .best-track-inner li {width:170px; flex:0 0 170px;}
}

body.filter-lock {overflow:hidden;}


.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 100px 20px;
  color: var(--light_txt);
}
.empty-state strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 13px;
  margin-bottom: 24px;
}
.empty-state-reset {
  height: 42px;
  padding: 0 24px;
  border: 1px solid var(--txt);
  background: #fff;
  border-radius: var(--ui-radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
}
.empty-state-reset:hover {
  background: var(--txt);
  color: #fff;
}
/* BASIC css end */