/* ============================================================
   Catalog Archive (WooCommerce Category / Shop) - Custom Layout
   Version: 1.2
   ============================================================ */

/* ---------- 1. ROOT VARIABLES ---------- */
:root {
    --catalog-panel-bg: #121212;
    --catalog-body-bg: #fff;
    --catalog-red: #d6181d;
    --catalog-text-light: #dcdcdc;
    --catalog-border: #000;
    --catalog-card-bg: #fff;
    --catalog-card-border: #000;
    --catalog-card-shadow: 0 6px 18px rgba(0,0,0,.35);
    --catalog-transition: .25s;
    --catalog-gap-x: 28px;
    --catalog-gap-y: 35px;
    --catalog-font: 'Roboto', Arial, sans-serif;
}

/* ---------- 2. BODY SCOPE ---------- */
body.archive.tax-product_cat,
body.post-type-archive.product {
    background: var(--catalog-body-bg);
    font-family: var(--catalog-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Nếu theme có wrapper phủ nền đen – ép trắng lại */
body.archive.tax-product_cat .site,
body.archive.tax-product_cat #page,
body.archive.tax-product_cat .site-content,
body.archive.tax-product_cat .content-area,
body.archive.tax-product_cat #primary {
    background: transparent;
}

/* ---------- 3. PANEL CHÍNH (khung 1220) ---------- */
/* Nếu muốn làm dải full width: tạo .catalog-section { background:#121212; } bao ngoài. */
.catalog-panel {
    max-width: 1220px;
    margin: 0 auto;
    background: var(--catalog-panel-bg);
    padding: 30px 30px 70px; /* giảm top từ 40 -> 30 (yêu cầu #3) */
    box-sizing: border-box;
    color: #f5f5f5;
    position: relative;
    font-family: var(--catalog-font);
}
.catalog-panel * { box-sizing: border-box; }

/* ---------- 4. BREADCRUMB ---------- */
.catalog-breadcrumb {
    font-size: 13px;
    letter-spacing: .3px;
    margin: 0 0 12px;
    color: #bbb;
    font-weight: 400;
    line-height: 1.3;
}
.catalog-breadcrumb .crumbs { display: inline; }
.catalog-breadcrumb a {
    color: #bbb;
    text-decoration: none;
    transition: color var(--catalog-transition);
    font-weight: 500;
}
.catalog-breadcrumb a:hover { color: #fff; }
.catalog-breadcrumb .crumb-sep {
    margin: 0 6px;
    color: #666;
}
.catalog-breadcrumb .crumb-current {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.catalog-breadcrumb .crumb-home { text-transform: none; }

/* ---------- 5. TITLE & DESCRIPTION ---------- */
.catalog-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--catalog-red);
    margin: 10px 0 25px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.catalog-desc {
    max-width: 380px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--catalog-text-light);
    margin: 0 0 30px;
}
.catalog-desc p { margin: 0 0 10px; }
.catalog-desc p:last-child { margin-bottom: 0; }

/* ---------- 6. GRID LAYOUT ---------- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--catalog-gap-y) var(--catalog-gap-x);
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ---------- 7. PRODUCT CARD ---------- */
.catalog-item { list-style: none; margin:0; padding:0; }

.catalog-item .ci-inner {
    height: 100%;
    background: var(--catalog-card-bg);
    color: #111;
    border: 1px solid var(--catalog-card-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 22px;
    position: relative;
    transition: box-shadow var(--catalog-transition), transform var(--catalog-transition);
}
.catalog-item .ci-inner:hover {
    box-shadow: var(--catalog-card-shadow);
    transform: translateY(-3px);
}

/* Ảnh (yêu cầu #3 & #4: giảm khoảng cách trên & dưới ảnh) */
.catalog-item .ci-thumb-wrap {
    display: block;
    width: 100%;
    position: relative;
    aspect-ratio: 3/4;
    margin: 0 0 8px; /* trước 14px */
    overflow: hidden;
}
.catalog-item .ci-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform var(--catalog-transition);
}
.catalog-item .ci-thumb-wrap:hover .ci-thumb { transform: scale(1.04); }
.catalog-item .ci-thumb--placeholder {
    background: linear-gradient(135deg,#f0f0f0,#ddd);
}

/* Title (yêu cầu #2 & #5: lớn hơn, giảm khoảng cách tới giá) */
.catalog-item .ci-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.38;
    margin: 4px 0 8px; /* giảm 14 -> 8 */
    min-height: 42px; /* đủ 2 dòng với font 14px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: center;
}
.catalog-item .ci-title a {
    color: #111;
    text-decoration: none;
    transition: color var(--catalog-transition);
}
.catalog-item .ci-title a:hover { color: var(--catalog-red); }

/* Price (yêu cầu #6) */
.ci-price {
    margin-top: auto;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
}
.ci-price .price-normal {
    font-weight: 700;
    color: var(--catalog-red);
    font-size: 16px;
}
.ci-price .price-sale {
    display: inline-block;
    font-weight: 700;
    color: var(--catalog-red);
    font-size: 16px;
    margin-right: 6px;
}
.ci-price .price-regular {
    text-decoration: line-through;
    color: #777;
    font-size: 13px;
    font-weight: 400;
}

/* Actions + Button (yêu cầu #7) */
.ci-actions { margin-top: 16px; text-align:center; }

.btn-view {
    display: inline-block;
    font-size: 12.5px;
    padding: 7px 22px;
    border: 1px solid #bdbdbd;
    background: linear-gradient(to bottom,#f5f5f5,#e5e5e5);
    color: #111;
    text-decoration: none;
    border-radius: 20px;
    transition: background var(--catalog-transition), color var(--catalog-transition),
                border-color var(--catalog-transition), box-shadow var(--catalog-transition),
                transform var(--catalog-transition);
    letter-spacing: .6px;
    cursor: pointer;
    line-height: 1.2;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.btn-view:before {
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 30% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 60%);
    opacity:.6;
    pointer-events:none;
    mix-blend-mode:screen;
    transition:opacity .4s;
}
.btn-view:hover {
    background: linear-gradient(to bottom,#d6181d,#b51217);
    color:#fff;
    border-color:#d6181d;
    box-shadow:0 4px 12px -2px rgba(214,24,29,.55);
    transform:translateY(-2px);
}
.btn-view:hover:before { opacity:.25; }
.btn-view:active {
    transform:translateY(0);
    box-shadow:0 2px 6px -1px rgba(214,24,29,.5);
}

/* Khi hover card mà không hover nút */
.catalog-item .ci-inner:hover .btn-view:not(:hover) {
    box-shadow:0 2px 4px rgba(0,0,0,.15);
}

/* Ẩn sale badge / rating mặc định */
.catalog-item .onsale,
.catalog-item .star-rating { display:none !important; }

/* ---------- 8. PAGINATION ---------- */
.catalog-pagination {
    grid-column: 1 / -1;
    margin-top: 40px;
    text-align: center;
}
.catalog-pagination .page-numbers {
    display: inline-block;
    margin: 0 4px 6px;
    padding: 6px 12px;
    font-size: 13px;
    background: #222;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    transition: background var(--catalog-transition);
}
.catalog-pagination .page-numbers.current,
.catalog-pagination .page-numbers:hover {
    background: var(--catalog-red);
    color: #fff;
}

/* ---------- 9. NO PRODUCTS ---------- */
.no-products {
    background: #222;
    padding: 30px;
    border-radius: 4px;
    color: #eee;
    font-size: 14px;
}

/* ---------- 10. OVERRIDES / RESET CŨ ---------- */
.catalog-grid .product {
    float: none !important;
    width: auto !important;
    clear: none !important;
    list-style:none;
}
.catalog-grid ul,
.catalog-grid li {
    list-style:none;
    margin:0;
    padding:0;
}
.catalog-grid .product,
.catalog-grid .product .ci-inner { min-height:0; }

/* ---------- 11. ACCESSIBILITY ---------- */
.catalog-item a:focus,
.btn-view:focus {
    outline:2px solid var(--catalog-red);
    outline-offset:2px;
}

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width:1300px){
    .catalog-panel { padding:30px 25px 70px; }
}
@media (max-width:1100px){
    .catalog-grid { gap:32px 24px; }
}
@media (max-width:992px){
    .catalog-grid {
        grid-template-columns:repeat(2,1fr);
        gap:30px 22px;
    }
    .catalog-title { font-size:26px; }
    .catalog-panel { padding:28px 24px 60px; }
}
@media (max-width:640px){
    .catalog-grid {
        grid-template-columns:1fr;
        gap:28px 0;
    }
    .catalog-title {
        font-size:24px;
        margin:8px 0 20px;
    }
    .catalog-desc { max-width:100%; margin-bottom:26px; }
    .catalog-panel { padding:26px 20px 56px; }
}
@media (max-width:420px){
    .btn-view { padding:6px 16px; font-size:11.5px; }
    .catalog-item .ci-title { font-size:13.5px; min-height:40px; }
}

/* ---------- 13. OPTIONAL 4-COLUMNS MODE ---------- */
.catalog-grid.columns-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1200px){
    .catalog-grid.columns-4 { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:992px){
    .catalog-grid.columns-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
    .catalog-grid.columns-4 { grid-template-columns:1fr; }
}

/* ---------- 14. DEBUG (bật khi cần) ----------
.catalog-grid { outline:2px solid red; }
.catalog-grid > .catalog-item { outline:1px dashed #0af; }
*/

/* Toàn bộ trang danh mục sản phẩm dùng nền #121212 */
body.archive.tax-product_cat,
body.post-type-archive.product {
    background:#121212 !important;
}

/* Xóa nền trắng ở các wrapper (nếu theme áp) */
body.archive.tax-product_cat .site,
body.archive.tax-product_cat #page,
body.archive.tax-product_cat .site-content,
body.archive.tax-product_cat .content-area,
body.archive.tax-product_cat #primary {
    background:transparent !important;
}

/* Panel bên trong giữ nền cùng màu hoặc chuyển trong suốt */
.catalog-panel {
    background:transparent; /* hoặc để #121212 cũng không khác biệt */
}

/* === Giảm khoảng trống trên & dưới ảnh + sát tiêu đề === */
.catalog-item .ci-thumb-wrap {
    aspect-ratio: auto;
    height: 250px;          /* chỉnh 240–260 tùy */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 6px;
}
.catalog-item .ci-thumb {
    height: 100%;
    width: auto;
    object-fit: contain;
}