/* ==========================================================================
   상품 카드 공통 — 시안 A (2026-09-17 · 3~4단계)
   메인 섹션(.wf-sec) · 상품목록 · 브랜드(.products-section) 가 같은 카드 모양
   서버 카드 common/components/product_card.html · products/products.html · JS 카드(homepage_sections.js) 모두 같은 class
   ========================================================================== */
/* 목록 — 기본 2열 · 딜은 가로 */
.wf-app :is(.wf-sec .product-grid, .products-grid) {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px 12px !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important; animation: none !important; transform: none !important;
}
.wf-app .wf-sec-row .product-grid {
    display: flex !important; gap: 10px !important; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px !important; padding: 0 16px 4px !important; scrollbar-width: none;
}
.wf-app .wf-sec-row .product-grid::-webkit-scrollbar { display: none; }
.wf-app .wf-sec-row .product-card { flex: 0 0 136px !important; scroll-snap-align: start; }

/* 카드 */
.wf-app :is(.wf-sec, .products-section) .product-card {
    width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.wf-app :is(.wf-sec, .products-section) .product-card:hover { transform: none !important; box-shadow: none !important; }
.wf-app :is(.wf-sec, .products-section) .product-image {
    position: relative; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
    border-radius: 12px; background: #f7f7f8; overflow: hidden; padding: 0 !important; margin: 0 !important; cursor: pointer;
}
.wf-app :is(.wf-sec, .products-section) .product-image img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 10px; }
.wf-app :is(.wf-sec, .products-section) .wishlist-btn {
    position: absolute !important; top: 6px !important; right: 6px !important; width: 28px !important; height: 28px !important;
    background: rgba(255, 255, 255, .85) !important; box-shadow: none !important; font-size: 14px !important;
}
.wf-card-off {
    position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 6px;
    background: #ff4b4b; color: #fff; font-size: 11px; font-weight: 700;
}
.wf-app :is(.wf-sec, .products-section) .product-info { padding: 8px 0 0 !important; text-align: left !important; }
.wf-app :is(.wf-sec, .products-section) .product-info h3 {
    margin: 0 !important; height: 35px; font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important;
    color: #1d1d1f; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal !important;
}
.wf-app :is(.wf-sec, .products-section) .price-info { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 4px 0 0 !important; justify-content: flex-start !important; }
.wf-app :is(.wf-sec, .products-section) .current-price { font-size: 15.5px !important; font-weight: 700 !important; color: #1d1d1f !important; }
.wf-app :is(.wf-sec, .products-section) .original-price { font-size: 12px !important; color: #b0b4ba !important; text-decoration: line-through; }
.wf-app :is(.wf-sec, .products-section) .rating, .wf-app :is(.wf-sec, .products-section) .discount { display: none !important; }
.wf-app :is(.wf-sec, .products-section) .product-actions { display: flex !important; gap: 6px !important; margin-top: 8px !important; padding: 0 !important; }
.wf-app :is(.wf-sec, .products-section) .product-actions button {
    flex: 1; height: 30px !important; min-height: 0 !important; padding: 0 6px !important; border-radius: 8px !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important;
}
.wf-app :is(.wf-sec, .products-section) .buy-now { background: #fff !important; color: #1d1d1f !important; border: 1px solid #dfe2e6 !important; }
.wf-app :is(.wf-sec, .products-section) .add-to-cart { background: var(--wf-green, #6cc417) !important; color: #fff !important; border: 0 !important; position: relative; }
.wf-app :is(.wf-sec, .products-section) .product-cart-count { position: absolute; top: -6px; right: -4px; }
.wf-app :is(.wf-sec, .products-section) .sold-out-badge { font-size: 12px; color: #9aa0a8; padding: 6px 0; }

/* 기존 CSS 가 가격 칸 최소 높이 52px · 버튼 칸 세로 32px 고정 → 카드 사이 빈 공간 · 버튼이 짜부라짐 (9/17 실측) */
.wf-app :is(.wf-sec, .products-section) .price-info { min-height: 0 !important; height: auto !important; }
.wf-app :is(.wf-sec, .products-section) .product-info { height: auto !important; }
.wf-app :is(.wf-sec, .products-section) .product-actions { flex-direction: row !important; height: auto !important; }
.wf-app :is(.wf-sec, .products-section) .product-actions button { width: auto !important; }

/* ── 상품목록 · 브랜드 머리 — 큰 제목 칸을 작게 (4단계) ── */
.wf-app .products-header { padding: 14px 16px 0 !important; margin: 0 !important; background: #fff !important; min-height: 0 !important; }
.wf-app .products-header .container { padding: 0 !important; }
.wf-app .products-header .header-content { padding: 0 !important; margin: 0 0 10px !important; text-align: left !important; }
.wf-app .products-header h1 { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; text-align: left !important; letter-spacing: 0 !important; }
.wf-app .products-header h1::after, .wf-app .products-header .header-content::after { display: none !important; }
.wf-app .products-controls {
    display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px !important;
    margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
}
.wf-app .products-info .total-count { font-size: 13px !important; color: var(--wf-sub, #8a8f98) !important; }
.wf-app .sort-buttons { display: flex !important; gap: 6px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.wf-app .sort-btn {
    flex: none !important; height: 32px !important; padding: 0 12px !important; border-radius: 16px !important;
    border: 1px solid var(--wf-line, #eceef1) !important; background: #fff !important; color: #4b5563 !important;
    font-size: 12.5px !important; font-weight: 600 !important; box-shadow: none !important;
}
.wf-app .sort-btn.active { background: var(--wf-ink, #1d1d1f) !important; border-color: var(--wf-ink, #1d1d1f) !important; color: #fff !important; }
.wf-app .products-section { padding: 16px 16px 0 !important; margin: 0 !important; background: #fff !important; }
.wf-app .products-section .container { padding: 0 !important; }
/* 정렬 줄 — 기존 border-radius 50% 에 가로 스크롤(overflow)이 겹쳐 버튼이 타원으로 잘림 (9/17 실측) */
.wf-app .sort-buttons { border-radius: 0 !important; }

/* 브랜드 화면 JS 카드 (product-card-image · product-card-info · product-card-actions) — 같은 모양으로 */
.wf-app .products-section .product-card-image {
    position: relative; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
    border-radius: 12px; background: #f7f7f8 !important; overflow: hidden;
}
.wf-app .products-section .product-card-image img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 10px; }
.wf-app .products-section .product-card-info { padding: 8px 0 0 !important; }
.wf-app .products-section .product-card-brand { font-size: 11px; color: var(--wf-sub, #8a8f98); }
.wf-app .products-section .product-card-name {
    font-size: 13px !important; line-height: 1.35; height: 35px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wf-app .products-section .product-card-price { margin-top: 4px; font-size: 15.5px !important; font-weight: 700 !important; color: #1d1d1f !important; }
.wf-app .products-section .product-card-actions { display: flex !important; gap: 6px !important; margin-top: 8px !important; padding: 0 !important; }