/* BASIC css start */
/* =========================================
   THE LAB CHEMICAL - Mobile Category/List
   Scope: .mo-shopbrand only
   ========================================= */
.mo-shopbrand{
  padding:12px 16px 28px;
  background:#fff;
}
.mo-shopbrand *{ box-sizing:border-box; }

/* -------------------------
   Breadcrumb
   ------------------------- */
.mo-shopbrand .crumb{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  font-size:12px;
  line-height:1.2;
  color:#7a7f88;
  margin:4px 0 12px;
}
.mo-shopbrand .crumb a{
  color:#7a7f88;
  text-decoration:none;
}
.mo-shopbrand .crumb a:last-child{
  color:#111;
  font-weight:700;
}

/* -------------------------
   Page title (category name)
   ------------------------- */
.mo-shopbrand .page-title{
  margin:6px 0 14px;
  font-size:18px;
  font-weight:900;
  line-height:1.25;
  text-align:center;
  color:#111;

  /* 클릭(카테고리 드로어 오픈용) */
  cursor:pointer;
  user-select:none;
}
.mo-shopbrand .page-title::after{
  content:" ▾";
  font-size:14px;
  color:#9aa0a6;
  font-weight:700;
}

/* -------------------------
   Result-in-search
   ------------------------- */
.mo-shopbrand .result-search{
  margin:6px 0 14px;
}
.mo-shopbrand .result-search-inner{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #e6e8ef;
  border-radius:14px;
  background:#f9fafb;
}
.mo-shopbrand #resultSearchInput{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
  color:#111;
  line-height:1.2;
  min-width:0;
}
.mo-shopbrand #resultSearchInput::placeholder{ color:#9aa0a6; }
.mo-shopbrand #resultSearchClear{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:18px;
  line-height:1;
  color:#666;
  cursor:pointer;
}
.mo-shopbrand #resultSearchClear:active{ transform:scale(.98); }
.mo-shopbrand #resultSearchInfo{
  margin:4px 6px 0;
  font-size:12px;
  line-height:1.2;
  color:#6b7280;
  min-height:14px; /* 메시지 없을 때도 레이아웃 흔들림 최소화 */
}

/* -------------------------
   Topbar (count + sort)
   ------------------------- */
.mo-shopbrand .topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0 8px;
}
.mo-shopbrand .topbar .total{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 14px;
  border:1px solid #e6e8ef;
  border-radius:9999px;
  background:#f6f8fd;
  font-size:13px;
  color:#2f3540;
  white-space:nowrap;
}
.mo-shopbrand .topbar .total strong{
  margin:0 2px;
  font-size:15px;
  font-weight:900;
  color:#1f2b91;
}
.mo-shopbrand .topbar .sort{
  margin-left:auto;
}

/* MakeShop 정렬 셀렉트 흡수(스킨 차이 대응) */
.mo-shopbrand .topbar .sort select,
.mo-shopbrand .MS_select_sort select,
.mo-shopbrand select.MS_select_sort{
  height:36px;
  padding:0 12px;
  border:1px solid #e6e8ef;
  border-radius:10px;
  background:#fff;
  font-size:13px;
  color:#111;
  line-height:36px;
}

/* -------------------------
   Product List GRID
   ------------------------- */
.mo-shopbrand .plist{ margin-top:6px; }

/* 카드 1개 = grid */
.mo-shopbrand .product_list_wrap article.card{
  display:grid !important;
  grid-template-columns: 84px 1fr auto;  /* image / content / price */
  column-gap:10px;
  row-gap:4px;
  align-items:start;

  padding:12px 0;
  border-bottom:1px solid #f1f2f6;
}

/* 이미지 */
.mo-shopbrand .product_list_wrap article.card .thumb{
  grid-column:1;
  grid-row:1 / span 3;
  width:84px;
}
.mo-shopbrand .product_list_wrap article.card .thumb img{
  width:84px;
  height:84px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #eee;
  display:block;
}

/* 본문 */
.mo-shopbrand .product_list_wrap article.card .body{
  grid-column:2 / span 2;
  grid-row:1 / span 3;
  min-width:0;
}

/* 브랜드·모델(1행 강제) */
.mo-shopbrand .product_list_wrap article.card .meta{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-size:12px;
  color:#6b7280;
  line-height:1.2;
}
.mo-shopbrand .product_list_wrap article.card .meta .dot{ opacity:.55; }
.mo-shopbrand .product_list_wrap article.card .meta .brand,
.mo-shopbrand .product_list_wrap article.card .meta .model{
  min-width:0;
}
.mo-shopbrand .product_list_wrap article.card .meta a{
  color:#6b7280;
  text-decoration:none;
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 제목 + 가격 같은 줄 */
.mo-shopbrand .product_list_wrap article.card .title-price{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:start;
  margin-top:2px;
}

/* 상품명(1행 강제) */
.mo-shopbrand .product_list_wrap article.card .title{
  margin:0;
  min-width:0;
}
.mo-shopbrand .product_list_wrap article.card .title a{
  display:block;
  font-size:14px;
  font-weight:900;
  color:#111;
  text-decoration:none;
  line-height:1.22;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 가격(1행 강제 + '원' 줄바꿈 방지) */
.mo-shopbrand .product_list_wrap article.card .price{
  text-align:right;
  min-width:92px;
}
.mo-shopbrand .product_list_wrap article.card .price .now,
.mo-shopbrand .product_list_wrap article.card .price .was,
.mo-shopbrand .product_list_wrap article.card .price .soldout{
  display:inline-block;
  white-space:nowrap;
  line-height:1.1;
}
.mo-shopbrand .product_list_wrap article.card .price .now{
  font-weight:900;
  font-size:13px;
  color:#1f2b91;
}
.mo-shopbrand .product_list_wrap article.card .price .was{
  font-size:11px;
  color:#9aa0a6;
  margin-top:2px;
}
.mo-shopbrand .product_list_wrap article.card .price .soldout{
  font-size:12px;
  font-weight:900;
  color:#b22;
}

/* 추가정보(sub): 길면 여러 줄 허용 */
.mo-shopbrand .product_list_wrap article.card .sub{
  margin:4px 0 0;
  font-size:12px;
  color:#6b7280;
  line-height:1.25;
  white-space:normal;
  word-break:break-word;
}

/* 더보기 버튼 */
.mo-shopbrand .more{ margin-top:12px; }
.mo-shopbrand .more .btn{
  display:block;
  width:100%;
  height:42px;
  line-height:42px;
  text-align:center;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#111;
  text-decoration:none;
}

/* 모바일 극소폭 */
@media (max-width:360px){
  .mo-shopbrand .product_list_wrap article.card{
    grid-template-columns: 78px 1fr auto;
  }
  .mo-shopbrand .product_list_wrap article.card .thumb{
    width:78px;
  }
  .mo-shopbrand .product_list_wrap article.card .thumb img{
    width:78px;
    height:78px;
  }
  .mo-shopbrand .product_list_wrap article.card .price{
    min-width:84px;
  }
}


/* BASIC css end */