
.main-cat-head {
    margin: 60px 0 0; padding:14px 100px 14px 28px; 
    background: var(--cat-head-bg, linear-gradient(90deg, #ffffff 0%, #eaf8f1 18%, #bfead3 38%, #7fd9ad 62%, #33be79 100%));
}
.main-cat-content {display:flex; align-items:center; justify-content:flex-end; gap:30px;}
.main-cat-text {display:flex; flex-direction:column; align-items:flex-end; text-align:right;}
.main-cat-title {font-size:26px; font-weight:800; letter-spacing:-0.6px; line-height:1.15; color:#fff;}
.main-cat-sub {margin-top:4px; font-size:14px; font-weight:600; color:rgba(255,255,255,0.9);}
.main-cat-arrow {display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cat-accent, #33be79);}
.main-cat-arrow svg{color: inherit;}

.main-cat-section {display:flex; gap:15px; margin:40px 0;}
.cat-item a {display:block; text-decoration:none; color:#111;}

.cat-banner-swiper {width: 100%; min-width: 0; overflow: hidden;}
.cat-banner-swiper .swiper-wrapper {width: 100%; height: 100%;}
.cat-banner-swiper .swiper-slide { width: 100% !important; height: 100%;}
.cat-banner {position:relative; display:block; overflow:hidden;}
.cat-banner img {width:100%; height:100%; object-fit:fill; display:block; border-radius:0px !important;}

/* 배너 높이 고정(웹) */
@media (min-width:769px){
    /* 이미지가 없으면 웹에서 전체 숨김 */
    .cat-sec.no-banners { display:none !important; }
    .cat-banner-swiper {height: 764px;}
    .cat-banner {height: 100%;}
}
/* 배너 높이 고정(모바일) */
@media (max-width:768px){
    /* 이미지가 없으면 모바일은 이미지만 숨김 */
    .cat-sec.no-banners .cat-banner-swiper{ display:none !important; }
    .cat-banner-swiper {height: 423px;}
    .cat-banner {height: 100%;}
}

/* 배너 pagination */
.cat-banner-swiper .swiper-pagination {display: none;}

.cat-products-wrap{flex:1; display:flex; flex-direction:column;}
.cat-products {flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:15px;}

.cat-item .thumb{width:100%; aspect-ratio:1/1; background:#f5f5f5; overflow:hidden; position:relative;}
.cat-item .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.cat-item .name{margin-top:10px; font-size:14px; line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;}
/* 가격 영역 래퍼 */
.price-area{position:relative; margin-top:6px;}

/* 점점 좁아지는 아래 화살표 */
.sale-arrow{position:absolute; top:0; left:0; background:#dc2626; color:#fff; font-size:12px; font-weight:800; padding:5px 10px; line-height:1; z-index:2;}
.sale-arrow::after{
    content:""; position:absolute; left:0; bottom:-10px; width:100%; height:10px; background:#dc2626;
    clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
}
.cat-item .price{margin-top:0px; font-size:13px; font-weight:800;}
.cat-item .point-price{position:relative; margin-top:6px; padding-top:35px; font-size:15px; color:#6b7280; line-height:1.25;}
.cat-item .point-sale-price{ margin-left:4px; color:#dc2626; font-weight:700;}

/* 상품영역 pagination */
.cat-pagination{display: none;}
.cat-dot{width:6px; height:6px; border-radius:50%; background:#d1d5db; border:0; padding:0; cursor:pointer;}
.cat-dot.is-active{background:#111;}

/*  ============================
    상품영역: 웹은 2x3 고정 + 높이 고정
    ===========================*/
@media (min-width:769px){
    .main-cat-section{display:grid; grid-template-columns: 2fr 3fr; gap:15px; align-items:start;}
    .cat-products {position: relative; display:grid; grid-template-columns: repeat(3, 1fr); gap:15px; height: calc(360px * 2 + 24px); align-content: start; overflow: hidden;}
    /* 행 사이 구분선 */
    .cat-products::after {content: ""; position: absolute; left: 0; right: 0; top: calc(360px + 12px); height: 1px; background: #e5e7eb; pointer-events: none;}
    .cat-banner-swiper {position: relative;}
    .cat-banner-swiper .swiper-pagination {display: flex; position: absolute; left: 0; right: 0; bottom: 10px !important; z-index: 10; justify-content: center;}
    .cat-banner-swiper .swiper-pagination-bullet {width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); opacity: 1;}
    .cat-banner-swiper .swiper-pagination-bullet-active {background: #fff;}
    .cat-banner{width:100%; height:100%;}
    .cat-banner img{width:100%; height:100%; object-fit:fill;}
    .cat-banner::after{content:""; position:absolute; left:0; right:0; bottom:0; height:80px; background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0)); pointer-events:none;}

    .cat-item{height: 360px;}
    .cat-item .thumb{aspect-ratio: auto;}
    .cat-item .thumb img{ height:100%; }

    .cat-pagination{display:flex; justify-content:center; gap:8px; position:absolute; left:0; right:0; bottom: 0; margin-top: 0; /* 기존 margin-top 무력화 */}
    .cat-products-wrap{position: relative; padding-bottom: 26px;}
    
}

/* =========================
   상품영역: 모바일은 2열 x 3행 고정 (총 6개)
   ========================= */
@media (max-width:768px){
    .cat-products{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; overflow: hidden; padding-bottom: 0; scroll-snap-type: none;}
    .cat-item{flex: none; width: auto;}
    .cat-item .thumb{aspect-ratio: 1/1; height:auto;}

    /* 모바일에서는 6개만 보여주기(7번째부터 숨김) */
    .cat-item:nth-child(n+7){display:none;}
}

@media (max-width:768px){
    .main-cat-head{margin: 0 15px; padding: 12px 15px; background: var(--cat-head-bg-mo, linear-gradient(90deg,#ffffff 10%,#eaf8f1 22%,#bfead3 33%,#7fd9ad 62%,#33be79 100%));}
    .main-cat-content{gap: 14px;}
    .main-cat-title{font-size: 18px; letter-spacing: -0.4px; line-height: 1.2;}
    .main-cat-sub{margin-top: 2px; font-size: 12px; font-weight: 500;}
    .main-cat-arrow svg{width: 22px; height: 22px;}

    .main-cat-section{flex-direction:column; gap:10px; margin:34px 0; padding: 0px 15px;}
    .cat-banner{width:100%; overflow:hidden;}
    .cat-banner-swiper{height: 386px;}
    /* 슬라이드 폭 고정 */
    .cat-banner-swiper .swiper-slide{width: 240px !important;}
    .cat-banner{width: 100%; height: 100%;}
    .cat-banner img{width: 100%; height: 100%; object-fit: cover;}

    .cat-item .name{font-size:13px;}
    .sale-arrow{font-size:11px; padding:4px 7px;}
}

/* =================================================
   Category Theme Overrides
   ================================================= */
.cat-sec--i060{
  --cat-head-bg: linear-gradient(90deg,#ffffff 0%,#eaf8f1 18%,#bfead3 38%,#7fd9ad 62%,#33be79 100%);
  --cat-head-bg-mo: linear-gradient(90deg,#ffffff 10%,#eaf8f1 22%,#bfead3 33%,#7fd9ad 62%,#33be79 100%);
  --cat-accent:#33be79;
}