/* 인트로(kicker+h1)/카테고리탭/브레드크럼은 subpage-hero.css의 .aramchan-sub-* 공통 클래스를 그대로 씀
   (전에는 이 파일 안에 .aramchan-shop-intro 등으로 따로 있었는데, 그러면 손볼 때마다
   여기랑 subpage-hero.css 둘 다 고쳐야 해서 하나로 합침 - 이제 사이즈/포맷은 subpage-hero.css 한 곳만) */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Pretendard,'Noto Sans KR',sans-serif;color:#1a1a1a;background:#fff}
.aramchan-shop-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid #e5e3dc;backdrop-filter:blur(12px)}
.aramchan-shop-header-inner{min-height:100px;width:100%;padding:0 clamp(20px,4vw,60px);display:flex;align-items:center;justify-content:space-between;gap:28px}
.aramchan-shop-logo img{display:block;width:auto;height:47px}
.aramchan-shop-nav{display:flex;align-items:center;gap:4px}
.aramchan-shop-nav-item{position:relative}
.aramchan-shop-nav-item>a{display:block;padding:10px 18px;font-size:16px;font-weight:700;color:#1a1a1a;text-decoration:none}
.aramchan-shop-dropdown{position:absolute;top:100%;left:50%;min-width:170px;padding:8px;background:#1a1a1a;transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:.2s}
.aramchan-shop-nav-item:hover .aramchan-shop-dropdown{transform:translate(-50%,0);opacity:1;visibility:visible}
.aramchan-shop-dropdown a{display:block;padding:10px 12px;color:#fff;text-decoration:none;font-size:14px}
.aramchan-shop-dropdown a:hover{background:#92795f}
.aramchan-shop-actions{display:flex;align-items:center;gap:16px}
.aramchan-shop-actions a{display:flex;padding:7px;color:#1a1a1a}
.aramchan-shop-actions svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aramchan-shop-main{max-width:1280px;margin:0 auto}
.aramchan-shop-products{padding:80px 0 140px}
/* 인기상품(listtype.php?type=4)만 상단 공백 제거 - 다른 상품목록 페이지는 그대로 둠 */
.aramchan-shop-products.aramchan-best-products{padding-top:0}
.aramchan-shop-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px}
.aramchan-shop-kicker{margin:0 0 8px;color:#92795f;font-size:12px;font-weight:800;letter-spacing:.16em}
.aramchan-shop-section-head h2{margin:0;font-size:34px;letter-spacing:-.04em}
.aramchan-shop-section-head>span{color:#9a9a9a;font-size:12px;letter-spacing:.12em}
.aramchan-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.aramchan-product-card{position:relative;display:block;color:inherit;text-decoration:none}
.aramchan-product-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:#f1eee7;border-radius:12px}
.aramchan-product-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,filter .3s ease}
.aramchan-product-card:hover .aramchan-product-image img{transform:scale(1.08);filter:brightness(.85)}
.aramchan-product-image span{display:grid;place-items:center;color:#fff;letter-spacing:.14em}

.aramchan-hover-plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;transition:opacity .25s ease;pointer-events:none}
.aramchan-product-card:hover .aramchan-hover-plus{opacity:1}
.aramchan-hover-plus svg{width:36px;height:36px;stroke:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}

/* .aramchan-product-image span{height:100%} 규칙(빈 이미지 자리 텍스트용)이 여기도
   먹어서 리본이 이미지 전체 높이로 길게 늘어졌었음 - 명시적으로 되돌림 */
.aramchan-product-image .aramchan-ship-flag{position:absolute;top:14px;left:0;z-index:2;height:auto;width:auto;display:inline-block;background:#2f6b3f;color:#fff;font-size:11.5px;font-weight:700;padding:6px 12px 6px 14px;letter-spacing:.02em;box-shadow:0 3px 8px rgba(0,0,0,.15);clip-path:polygon(0 0,100% 0,92% 100%,0% 100%)}

/* 인기상품(listtype.php?type=4) 순위뱃지 - design/best_rank_badge_mockup.html 시안.
   기존 .aramchan-product-* 클래스는 안 건드리고 새 클래스만 추가. */
.aramchan-rank-badge{position:absolute;top:14px;right:14px;z-index:3;min-width:30px;height:30px;padding:0 6px;border-radius:8px;background:#ff5c8a;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1;font-family:Pretendard,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(255,92,138,.35)}
/* 순위뱃지+무료배송 리본이 같이 있으면 리본을 뱃지 밑으로 내림(겹침 방지) */
.aramchan-product-image:has(.aramchan-rank-badge) .aramchan-ship-flag{top:0}

/* 호버 시 장바구니/위시리스트 아이콘 - 홈 Best Product 캐러셀과 동일한 스타일 */
.aramchan-product-quick{position:absolute;right:12px;bottom:12px;display:flex;gap:10px;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;z-index:3}
.aramchan-product-card:hover .aramchan-product-quick{opacity:1;transform:translateY(0)}
.aramchan-product-quick button{width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;color:#1a1a1a;box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.aramchan-product-quick button:hover{background:var(--brand-primary);color:#fff;transform:translateY(-2px)}
.aramchan-product-quick button.done{background:#3b6fa0;color:#fff;}
.aramchan-product-quick button.wished{background:#c0392b;color:#fff;}
.aramchan-product-quick svg{width:18px;height:18px;stroke:currentColor}

.aramchan-product-info{padding-top:16px;text-align:center}
.aramchan-product-info h3{margin:0 0 6px;font-size:17px;transition:color .25s ease}
.aramchan-product-card:hover .aramchan-product-info h3{color:#2f6b3f}
.aramchan-product-info p{margin:0 0 10px;color:#9a9a9a;font-size:14px;line-height:1.5}
.aramchan-price-row{display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap}
.aramchan-price-row .pct{font-size:15px;font-weight:800;color:#c0392b}
.aramchan-price-row .cust{font-size:13px;color:#9a9a9a;text-decoration:line-through}
.aramchan-price-row .now{font-size:17px;font-weight:800;color:#1a1a1a;width:100%;margin-top:2px}
.aramchan-price-row .now.solo{margin-top:0}

/* 상품 타입 배지 (히트/추천/신상품/인기/할인) - 가격 밑에 아주 작게, 색만 다르게 */
.aramchan-product-badges{display:flex;justify-content:center;gap:6px;margin-top:8px;padding-top:0}
.aramchan-badge{font-size:11.5px;font-weight:700;padding:4px 11px;letter-spacing:.01em;border:1px solid #d5d2c7;border-radius:999px;background:none}
.aramchan-badge-hit{border-color:#b0522d;color:#b0522d}
.aramchan-badge-pick{border-color:#1a1a1a;color:#1a1a1a}
.aramchan-badge-new{border-color:#92795f;color:#78624b}
.aramchan-badge-best{border-color:#3b6fa0;color:#3b6fa0}
.aramchan-badge-sale{border-color:#c0392b;color:#c0392b}
.aramchan-shop-empty{padding:100px 0;text-align:center;color:#9a9a9a}
/* 상품검색(shop/search.php) 페이징 */
.aramchan-shop-paging{margin-top:48px;text-align:center}
.aramchan-shop-footer{padding:36px clamp(20px,4vw,60px);border-top:1px solid #e5e3dc;color:#9a9a9a;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:900px){
  .aramchan-shop-nav{display:none}
  .aramchan-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
}
@media(max-width:520px){
  .aramchan-shop-header-inner{min-height:78px}
  .aramchan-shop-logo img{height:36px}
  .aramchan-shop-actions{gap:4px}
  .aramchan-shop-products{padding-top:52px}
  .aramchan-shop-products.aramchan-best-products{padding-top:0}
  .aramchan-shop-section-head h2{font-size:28px}
}