/* BASIC css start */
/* =========================================================
   SHOP BRAND CSS (Optimized)
   - 공통 클래스: .scroll-nav (카테고리 가로 스크롤 nav), .prds-slider (best/recmd/promotion 슬라이더)
   - 슬라이드 폭 예약 값은 JS 의 BREAKPOINTS 와 동일하게 유지할 것
========================================================= */
.full-wrapper{--sb-line:#e5e5e5;box-sizing:border-box;max-width:1200px;width:100%;margin:0 auto;}

/* ---------- Header / Category nav ---------- */
.shopbrand-header{padding-top:var(--cw-size-60);background:var(--cw-color-white);}
.shopbrand-header__title{display:flex;align-items:center;gap:var(--cw-size-10);font-size:var(--cw-size-24);line-height:var(--cw-size-32);font-weight:700;color:var(--cw-heading-color);}
.shopbrand-header__nav-wrapper{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.shopbrand-header__nav-wrapper img{display:block;pointer-events:none;-webkit-user-drag:none;user-select:none;}

.scroll-nav{display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:20px;padding-bottom:10px;scrollbar-width:thin;touch-action:pan-x pan-y;overscroll-behavior-x:contain;cursor:grab;}
.scroll-nav::-webkit-scrollbar{display:block;height:4px;}
.scroll-nav::-webkit-scrollbar-track{background:#eee;border-radius:10px;}
.scroll-nav:active,.scroll-nav.dragging{cursor:grabbing;}
.scroll-nav li{flex:0 0 auto;}
.scroll-nav a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;color:var(--cw-heading-color);font-size:var(--cw-size-16);line-height:var(--cw-size-24);user-select:none;}
/* 이미지가 있는 항목은 이미지만 노출 (텍스트 숨김). 서브 nav 의 "li a" 규칙보다 우선하도록 선택자 구체화 */
.scroll-nav li a:has(img){padding:0;font-size:0;line-height:0;}
.scroll-nav img{height:36px;object-fit:contain;padding:4px 18px;border:1px solid var(--sb-line);border-radius:10px;transition:border-color .2s ease;}

.shopbrand-header__nav{margin-top:20px;padding-bottom:12px;gap:30px;border-bottom:1px solid var(--sb-line);}
.shopbrand-header__nav .active{position:relative;}
.shopbrand-header__nav .active::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:1px;background:var(--cw-heading-color);}
.shopbrand-header__nav .active a{font-weight:700;}

.shopbrand-header__nav__s{margin-top:16px;padding:0 10px;gap:24px;}
.shopbrand-header__nav__s li a{padding:8px 0;font-size:var(--cw-size-14);line-height:1.2;color:var(--cw-color-80);}
.shopbrand-header__nav__s .active a{font-weight:600;color:var(--cw-heading-color);border-bottom:1px solid var(--cw-heading-color);}

.category-title{padding:var(--cw-size-48) 0;text-align:center;}
/* 슬라이더 위 분류명(타이틀) 이미지 숨김 */
.category-title img{display:none;}

/* ---------- Slider (best / recmd / promotion) ---------- */
.prds-slider{--sb-slides:5;--sb-gap:10px;margin-top:var(--cw-size-48);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--sb-line);}
.prds-slider .prds--image{box-sizing:border-box;overflow:hidden;border:1px solid #ddd;border-radius:10px;}

.prds-slider .prds--image img{aspect-ratio:1/1;object-fit:contain; display:block;width:100%;height:auto;}
/* Swiper 초기화 전 레이아웃 흔들림 방지: 슬라이드 폭 예약 */
.prds-slider:not(.cowave-swiper-initialized) .cowave-swiper-slide{width:calc((100% - (var(--sb-slides) - 1) * var(--sb-gap)) / var(--sb-slides));margin-right:var(--sb-gap);}
.best-wrapper .prds--price-wrap,.recmd-wrapper .prds--price-wrap{margin-bottom:10px;}
@media (max-width:1199.98px){.prds-slider{--sb-slides:4;}}
@media (max-width:767.98px){.prds-slider{--sb-slides:3;--sb-gap:6px;}}
@media (max-width:479.98px){.prds-slider{--sb-slides:2;}}

.title-btns{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cw-size-16);}
.title-btns span{font-size:var(--cw-size-18);line-height:var(--cw-size-26);font-weight:700;}
.title-btns a{width:var(--cw-size-28);height:var(--cw-size-28);}
.title-btns a.disable{opacity:.3;}

/* ---------- Product list ---------- */
.products-wrapper{padding-top:var(--cw-size-60);}
.products-wrapper .prds-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:var(--cw-size-16);}
.products-wrapper .prds-title h2{font-size:var(--cw-size-14);line-height:var(--cw-size-20);font-weight:400;}
.products-wrapper .prds-title strong{font-weight:700;}
.products-wrapper .prds-list.list,.products-wrapper .prds-list.gallery{display:grid;margin-top:40px;}
.products-wrapper .prds-list.list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px;}
.products-wrapper .prds-list.gallery{grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 8px;}
.products-wrapper > .prds-list.list,.products-wrapper > .prds-list.gallery{margin-top:0;}

/* 상품 목록은 6줄까지만 표시 (열 수 x 6). 숨겨진 lazy 이미지는 요청하지 않음 */
/*.products-wrapper .prds-list.gallery > .prds-list--item:nth-child(n+26),
.products-wrapper .prds-list.list > .prds-list--item:nth-child(n+13){display:none;} */

.products-wrapper .prds--image{overflow:hidden;border-radius:10px;}
.products-wrapper .prds--image > img{aspect-ratio:1/1;object-fit:contain;display:block;width:100%;height:auto;border:1px solid var(--cw-color-30);border-radius:10px;transition:border-color .2s ease;}

.prds-btn{display:flex;justify-content:center;align-items:center;width:100%;margin-top:30px;}
.prds-btn .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px;padding:5px 18px;}

/* hover 는 마우스 기기에서만 (터치 기기에서 눌린 채 남는 현상 방지) */
@media (hover:hover){
.scroll-nav a:hover img{border-color:#000;}
.prds-slider .prds-list--item:hover .prds--image{border-color:#000;}
.products-wrapper .prds-list--item:hover .prds--image > img{border-color:#000;}
}

/* ---------- Responsive ---------- */
@media (max-width:1199.98px){
.full-wrapper{--bs-gutter-x:var(--cw-size-50);}
.shopbrand-header{position:relative;min-height:100px;}
.shopbrand-header__title{display:block !important;}
.products-wrapper .prds-list.list{grid-template-columns:1fr;}
.products-wrapper .prds-list.gallery{grid-template-columns:repeat(4,1fr);gap:10px;}
}
@media (max-width:767.98px){
.full-wrapper{--bs-gutter-x:20px;}
.scroll-nav{scrollbar-width:none;}
.scroll-nav::-webkit-scrollbar{display:none;}
.products-wrapper .prds-list.gallery{grid-template-columns:repeat(3,1fr);gap:6px;}
.prices,.prices.prices-grid{display:flex !important;flex-direction:column;align-items:flex-start;gap:0;}
.prices span{margin:0;line-height:1.2;}
.prices .discount{order:1;width:100%;text-align:left;}
.prices .original{order:2;width:100%;}
.prices .price{order:3;display:flex;align-items:center;justify-content:space-between;width:100%;}
.prds--price-wrap .preview-btn{position:static !important;margin-left:auto;}
}
/* BASIC css end */