@charset "UTF-8";

/* product-card.css — 상품 카드(쿼리 루프 아이템) + 루프 컨테이너 그리드
원본 클래스(catalog-item.st-tile, tile-*)를 루프 아이템 요소에 그대로 부여하면 무수정 재사용 가능.
루프는 Block/Container의 Query Loop 설정으로 구성(공식: 별도 "Loop Grid" 요소 없음) —
컨테이너에 .tiles-grid 부여, 아이템 래퍼는 grid 자식이 되도록 100% 폭 유지. */

[data-component-pin="spc-mgz-evt-view"] .promotion-DSP_TAB_BANNER_GOD .catalog-item .tile-brand {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.text-input:disabled + .text-input-action .button-icon,
.text-input:disabled + .text-input-action .catalog-item.st-tile .tile-thumb .tile-heart,
.catalog-item.st-tile .tile-thumb .text-input:disabled + .text-input-action .tile-heart,
.text-input-currency:disabled + .text-input-action .button-icon,
.text-input-currency:disabled + .text-input-action .catalog-item.st-tile .tile-thumb .tile-heart,
.catalog-item.st-tile .tile-thumb .text-input-currency:disabled + .text-input-action .tile-heart {
  background-color: #f8f8f8;
}

.text-input-box .text-input-action .button-icon,
.text-input-box .text-input-action .catalog-item.st-tile .tile-thumb .tile-heart,
.catalog-item.st-tile .tile-thumb .text-input-box .text-input-action .tile-heart {
  background-color: #fff;
}

.text-input-box .text-input-action .button-icon + .button-icon,
.text-input-box .text-input-action .catalog-item.st-tile .tile-thumb .tile-heart + .button-icon,
.catalog-item.st-tile .tile-thumb .text-input-box .text-input-action .tile-heart + .button-icon,
.text-input-box .text-input-action .catalog-item.st-tile .tile-thumb .button-icon + .tile-heart,
.catalog-item.st-tile .tile-thumb .text-input-box .text-input-action .button-icon + .tile-heart,
.text-input-box .text-input-action .catalog-item.st-tile .tile-thumb .tile-heart + .tile-heart,
.catalog-item.st-tile .tile-thumb .text-input-box .text-input-action .tile-heart + .tile-heart {
  margin-left: 8px;
}

.icon-heart.st-black {
  background-image: url("../../assets/img/icons/icon-heart__black.png");
}

.icon-heart.st-gray {
  background-image: url("../../assets/img/icons/icon-heart__gray.png");
}

.icon-heart.st-default {
  background-image: url("../../assets/img/icons/icon-heart__default.png");
}

.icon-heart.st-sm.st-black {
  background-image: url("../../assets/img/icons/icon-heart-sm__black.png");
}

.icon-heart.st-sm.st-gray {
  background-image: url("../../assets/img/icons/icon-heart-sm__gray.png");
}

.tile-thumb .icon-heart.st-default,
.spot-visual .icon-heart.st-default,
.favorite-brand .icon-heart.st-default {
  background-image: url("../../assets/img/icons/icon-heart-fill__default.png");
}

.tile-thumb .icon-heart.st-lg,
.spot-visual .icon-heart.st-lg,
.favorite-brand .icon-heart.st-lg {
  background-image: url("../../assets/img/icons/icon-heart-fill-lg__default.png");
}

.button-icon,
.catalog-item.st-tile .tile-thumb .tile-heart {
  position: relative;
  vertical-align: middle;
  padding: 8px;
}

.button-icon:not(.button-clear),
.catalog-item.st-tile .tile-thumb .tile-heart:not(.button-clear) {
  display: inline-flex;
}

.button-icon.st-sm,
.catalog-item.st-tile .tile-thumb .st-sm.tile-heart {
  padding: 4px;
}

.button-icon.st-xs,
.catalog-item.st-tile .tile-thumb .st-xs.tile-heart {
  padding: 3px;
}

.button-icon:disabled,
.catalog-item.st-tile .tile-thumb .tile-heart:disabled {
  background-color: #f8f8f8;
}

.button-icon .icon-badge,
.catalog-item.st-tile .tile-thumb .tile-heart .icon-badge {
  position: absolute;
  top: 5px;
  left: 18px;
  z-index: 1;
  background-color: #000;
  padding: 2px 4px;
  min-width: 18px;
  max-width: 30px;
  border-radius: 11px;
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}

.catalog-item.st-tile .tile-link {
  display: block;
}

.catalog-item.st-tile .tile-thumb {
  position: relative;
  display: block;
}

.catalog-item.st-tile .tile-thumb .tile-link {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 132%;
  background-color: #fff;
}

.catalog-item.st-tile .tile-thumb .tile-link .tile-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.catalog-item.st-tile .tile-thumb .tile-link:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #00000005;
}

.catalog-item.st-tile .tile-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: top;
}

.catalog-item.st-tile .tile-body {
  display: block;
  position: relative;
  padding-top: 16px;
  padding-left: 8px;
  padding-right: 8px;
}

.catalog-item.st-tile .tile-brand {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}

.catalog-item.st-tile .tile-brand + .tile-goods-label {
  margin-top: 8px;
}

.catalog-item.st-tile .tile-goods-label {
  font-size: 13px;
  line-height: 22px;
  color: #666;
}

.catalog-item.st-tile .tile-goods-label .tile-goods-label-inner {
  display: block;
  font-weight: 300;
  margin-top: -2px;
  margin-bottom: -2px;
  word-break: keep-all;
  display: -webkit-box;
  max-height: 572px;
  font-size: 13px;
  line-height: 22px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.catalog-item.st-tile .tile-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.catalog-item.st-tile .tile-price {
  display: block;
  margin-right: 8px;
}

.catalog-item.st-tile .tile-price.st-current {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}

.catalog-item.st-tile.st-sm .tile-body {
  padding-top: 16px;
  padding-left: 0;
  padding-right: 0;
}

.catalog-item.st-tile.st-xs .tile-body {
  padding-top: 8px;
  padding-left: 0;
  padding-right: 0;
}

#floating-nav .button-icon,
#floating-nav .catalog-item.st-tile .tile-thumb .tile-heart,
.catalog-item.st-tile .tile-thumb #floating-nav .tile-heart {
  display: block;
  padding: 15px;
  border: 1px solid #eee;
  background-color: #fffc;
  border-radius: 50%;
}

#floating-nav .button-icon.floating-top,
#floating-nav .catalog-item.st-tile .tile-thumb .floating-top.tile-heart,
.catalog-item.st-tile .tile-thumb #floating-nav .floating-top.tile-heart {
  margin-bottom: -72px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.catalog-item.st-tile .tile-price-box {
  margin-top: 2.44%;
}

/* ============================================================
   루프 컨테이너 그리드 — Query Loop를 켠 Block/Container에 부여
   컬럼: 6(≥1280) / 4(≤1279) / 3(≤1024) / 2(≤767), gap 8 / 72
   (원본 row-cols-lg-6 + gx-8 + gy-72 근거, 반응형은 클론 responsive.css 확장)
   ============================================================ */
.tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 72px 8px;
}

@media (max-width: 1279px) {
  .tiles-grid { grid-template-columns: repeat(4, 1fr); gap: 48px 8px; }
}

@media (max-width: 1024px) {
  .tiles-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 8px; }
}

@media (max-width: 767px) {
  .tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 8px; }
}