/* ============================================================
   카드 전용 색 변수
   페이지 테마(--accent/--soft)를 그대로 따라간다.
   body.cat-* 가 바뀌면 카드 배경도 같이 바뀌는 구조.
   맨 뒤 #색상은 변수가 하나도 없을 때의 최종 보험값.
   ============================================================ */
/* body 에서 정의해야 body.cat-* 의 --accent 를 볼 수 있다.
   :root 에 두면 폴백값으로 굳어서 전 메뉴가 초록으로 나옴 */
body{
  --product-card-accent:      var(--accent, #2F8F7B);
  --product-card-accent-dark: var(--accent2, #23695A);
  --product-card-soft:        var(--soft, #E8F4F1);
  --product-card-ink:         var(--ink, #243247);
  --product-card-muted:       var(--muted, #61707A);
  --product-card-line:        var(--line, #D8DDD8);
}

.doiti-product-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:30px 22px;
}

.doiti-product-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  background:transparent;
  transition:transform .18s ease;
}

.doiti-product-card:hover{
  transform:translateY(-3px);
}

.doiti-product-card__visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:218px;
  aspect-ratio:1 / .82;
  overflow:hidden;
  padding:28px 20px 18px;
  border-radius:8px;
  background:
    radial-gradient(150px 100px at 84% 14%, color-mix(in srgb, var(--product-card-accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--product-card-soft) 74%, white), #F9FBFA 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--product-card-accent) 10%, transparent);
  transition:box-shadow .18s ease;
}

.doiti-product-card:hover .doiti-product-card__visual{
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--product-card-accent) 18%, transparent),
    0 18px 28px rgba(36,50,71,.08);
}

.doiti-product-card__visual img{
  width:100%;
  max-width:196px;
  height:178px;
  object-fit:contain;
  transition:transform .28s ease;
}

.doiti-product-card:hover .doiti-product-card__visual img{
  transform:scale(1.04);
}

.doiti-product-card__badges{
  position:absolute;
  z-index:1;
  top:14px;
  left:14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.doiti-product-card__badge{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:var(--product-card-ink);
  box-shadow:0 6px 12px rgba(36,50,71,.06);
  font-size:11px;
  font-weight:900;
}

.doiti-product-card__badge.is-quote{
  background:color-mix(in srgb, var(--product-card-soft) 62%, white);
  color:var(--product-card-accent-dark);
}

.doiti-product-card__badge.is-new{
  background:#FFF2D8;
  color:#96631A;
}

.doiti-product-card__placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border-radius:10px;
  background:rgba(255,255,255,.9);
  color:var(--product-card-accent-dark);
  font-size:30px;
  font-weight:900;
  box-shadow:0 14px 28px rgba(36,50,71,.08);
}

.doiti-product-card__body{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  gap:8px;
  padding:15px 4px 0;
}

.doiti-product-card__category{
  color:var(--product-card-accent-dark);
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
}

.doiti-product-card__name{
  display:-webkit-box;
  overflow:hidden;
  color:var(--product-card-ink);
  font-size:17px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.3px;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.doiti-product-card:hover .doiti-product-card__name{
  text-decoration:underline;
}

.doiti-product-card__meta{
  display:-webkit-box;
  overflow:hidden;
  min-height:42px;
  margin:0;
  color:var(--product-card-muted);
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.doiti-product-card__specs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.doiti-product-card__specs span{
  padding:4px 7px;
  border-radius:4px;
  background:color-mix(in srgb, var(--product-card-soft) 56%, white);
  color:var(--product-card-muted);
  font-size:11px;
  font-weight:800;
}

.doiti-product-card__price{
  margin-top:auto;
  padding-top:5px;
  color:var(--product-card-ink);
  font-size:19px;
  font-weight:900;
}

.doiti-product-card__price.is-quote{
  color:var(--product-card-accent-dark);
}

@media (max-width: 1020px){
  .doiti-product-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  .doiti-product-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 14px; }
  .doiti-product-card__visual{ min-height:0; aspect-ratio:1 / 1; padding:24px 14px 14px; }
  .doiti-product-card__visual img{ height:145px; }
}

@media (max-width: 460px){
  .doiti-product-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   할인 / 품절 표시 — 목업에 없던 부분
   dox3 카드가 쓰던 표기를 dodon 톤으로 옮긴 것
   ------------------------------------------------------------ */
.doiti-product-card__badge.is-sale{
  background:#C6603D;
  color:#fff;
}
.doiti-product-card__badge.is-sold{
  background:rgba(36,50,71,.55);
  color:#fff;
}

/* 가격 영역: 정가(취소선) 위, 판매가 아래 */
.doiti-product-card__price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
}
.doiti-product-card__price-origin{
  color:var(--product-card-muted);
  font-size:12px;
  font-weight:700;
  text-decoration:line-through;
}
.doiti-product-card__price-now.is-sale{
  color:#C6603D;
}
/* 품절 — 카드 전체를 흐리게. 링크는 살려둔다(상세에서 재입고 안내 등) */
.doiti-product-card.is-soldout{
  opacity:.45;
  filter:grayscale(.5);
}
.doiti-product-card.is-soldout:hover{
  transform:none;
}
.doiti-product-card.is-soldout .doiti-product-card__badge.is-sold{
  opacity:1;                      /* 배지는 흐려지면 안 읽힌다 */
  filter:none;
}

/* ------------------------------------------------------------
   글자 크기·정렬 조정
   상품명 ↑ / 옵션은 작고 연하게 한 줄 / 가격 ↑ 오른쪽
   ------------------------------------------------------------ */
.doiti-product-card__name{
  font-size:17px;
}

/* 옵션 — 칩 모양 버리고 평문 한 줄 */
.doiti-product-card__specs{
  display:block;
  color:var(--product-card-muted);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
}
.doiti-product-card__specs span{
  padding:0;
  background:none;
  font-size:inherit;
  font-weight:inherit;
}

.doiti-product-card__price{
  align-items:flex-end;      /* 오른쪽 정렬 */
  font-size:20px;
}