/**
 * Block Skin: product/hyetaek-deal - Style
 *
 * 혜택의 차이 시안 E · 이주의 특가
 * 색상은 프레임 변수(--hy-accent 등)를 우선 쓰고, 없으면 시안 값으로 폴백한다.
 */

.hy-deal {
    --hy-deal-accent: var(--hy-accent, #C4001A);
    --hy-deal-ink: var(--foreground, #111111);
    --hy-deal-sub: var(--muted-foreground, #555555);
    --hy-deal-faint: #767676;
    --hy-deal-soft: var(--muted, #F4F4F4);
    min-width: 0;
}

/* 카운트다운 줄 — PC 오른쪽 정렬, 제목 바로 아래로 살짝 당김 */
.hy-deal__timer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--hy-deal-sub);
    font-variant-numeric: tabular-nums;
}

.hy-deal .block-title + .hy-deal__timer {
    margin-top: -8px;
}

.hy-deal__timer-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #111111;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 1.3;
}

/* 리스트 — 코어 그리드 간격을 시안 간격으로 */
.hy-deal__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hy-deal .mublo-item-layout:not(.is-slide) > ul {
    gap: 28px 18px;
}

.hy-deal .mublo-item-layout:not(.is-slide)[data-pc-cols="auto"] > ul {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.hy-deal__item {
    min-width: 0;
}

/* 카드 */
.hy-deal__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    color: var(--hy-deal-ink);
    text-decoration: none;
}

.hy-deal__card:hover {
    color: var(--hy-deal-ink);
    text-decoration: none;
}

.hy-deal__card:hover .hy-deal__img {
    transform: scale(1.03);
}

.hy-deal__card:focus-visible {
    outline: 2px solid var(--hy-deal-accent);
    outline-offset: 4px;
    border-radius: 12px;
}

/* 이미지 */
.hy-deal__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: var(--hy-deal-soft);
}

.hy-deal__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.hy-deal__img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hy-deal-faint);
}

.hy-deal__img--empty svg {
    width: 36%;
    height: 36%;
}

/* 품절 */
.hy-deal__item--soldout .hy-deal__img {
    opacity: 0.5;
}

.hy-deal__soldout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

/* 텍스트 */
.hy-deal__brand {
    font-size: 12px;
    font-weight: 700;
    color: var(--hy-deal-sub);
}

.hy-deal__name {
    margin-top: -4px;
    font-size: 14px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* 가격 */
.hy-deal__regular {
    font-size: 13px;
    color: var(--hy-deal-faint);
    font-variant-numeric: tabular-nums;
}

.hy-deal__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin-top: -4px;
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.hy-deal__rate {
    color: var(--hy-deal-accent);
}

.hy-deal__sale {
    font-weight: 900;
}

/* 가격 비공개 문구 (쇼핑몰 설정 — 가격 공개 대상) */
.hy-deal__price--hidden {
    margin-top: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--hy-deal-sub);
}

.hy-deal__note {
    font-size: 12px;
    color: var(--hy-deal-sub);
}

/* 모바일 */
@media (max-width: 768px) {
    .hy-deal__timer {
        justify-content: flex-start;
    }

    .hy-deal .mublo-item-layout:not(.is-slide) > ul {
        gap: 18px 10px;
    }

    .hy-deal__price {
        font-size: 16px;
    }
}

/* 빈 상태 — 점선 박스 (렌더러 renderEmpty 가 이 파일을 로드한다) */
.block-product-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    padding: 16px;
    border: 1px dashed var(--border, #E5E5E5);
    border-radius: 10px;
    color: color-mix(in srgb, var(--muted-foreground, #555555) 55%, transparent);
    font-size: 0.875rem;
    text-align: center;
}

.block-product-empty__icon {
    font-size: 1.75rem;
    line-height: 1;
}