/* =========================================================================
   WOOCOMMERCE — catalogue sản phẩm Eco Terra Pack
   File này CHỈ nạp ở trang cửa hàng / chuyên mục sản phẩm / chi tiết sản phẩm
   (xem vsetp_woo_styles trong functions.php).

   Theme cha không có một dòng CSS nào cho WooCommerce nên lưới sản phẩm hiện
   ra trần: không viền, không nền, ảnh méo tỉ lệ. Ở đây dựng lại thẻ sản phẩm
   theo đúng kiểu thẻ ở trang chủ (khung ảnh 4:5 nền trắng, bo góc 12px, viền
   mảnh, tiêu đề xanh đậm đạt chuẩn tương phản).
   ========================================================================= */

.woocommerce {
    --woo-ink: #17281d;
    --woo-muted: #5a6b60;
    --woo-line: #e7ded1;
    --woo-green: var(--vs-primary-dark, #00813F);
}

/* --- Khung trang --- */
.woocommerce .woocommerce-products-header,
.woocommerce .term-description {
    margin-bottom: 1.25rem;
}
.woocommerce .woocommerce-result-count {
    margin: 0 0 1rem;
    color: var(--woo-muted);
    font-size: .9rem;
}
.woocommerce .woocommerce-ordering {
    margin-bottom: 1.5rem;
}
.woocommerce .woocommerce-ordering select {
    min-height: 44px;
    padding: .5rem .75rem;
    border: 1px solid var(--woo-line);
    border-radius: 8px;
    background: #fff;
    color: var(--woo-ink);
    font: inherit;
}

/* =========================================================================
   LƯỚI SẢN PHẨM
   ========================================================================= */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}
/* WooCommerce đặt sẵn float + width theo cột: gỡ để grid hoạt động */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}
.woocommerce ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--woo-line);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(23, 40, 29, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    border-color: #c6dbcd;
    box-shadow: 0 10px 26px -14px rgba(23, 40, 29, .35);
}

/* Khung ảnh: 4:5 nền trắng, khớp ảnh sản phẩm đã tách nền 800x1000 */
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin: 0 0 .9rem;
    border: 1px solid var(--woo-line);
    border-radius: 12px;
    background: #fff;
    display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 .75rem;
    padding: 0;
    color: var(--woo-green);
    font-size: 1.02rem;
    line-height: 1.4;
    font-weight: 700;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
    text-decoration: underline;
}

/* Nút "Xem chi tiết" */
.woocommerce ul.products li.product .button {
    margin: auto 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .7rem 1.25rem;
    border-radius: 999px;
    border: 1.6px solid var(--woo-green);
    background: transparent;
    color: var(--woo-green);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--woo-green);
    color: #fff;
}
/* Ẩn giá và nhãn khuyến mãi — catalogue không có giá */
.woocommerce ul.products li.product .price,
.woocommerce span.onsale,
.woocommerce ul.products li.product .star-rating {
    display: none !important;
}

/* =========================================================================
   TRANG CHI TIẾT SẢN PHẨM
   ========================================================================= */
.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper img {
    border: 1px solid var(--woo-line);
    border-radius: 14px;
    background: #fff;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img {
    border-radius: 8px;
    opacity: .75;
    transition: opacity .18s ease;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs .flex-active {
    opacity: 1;
}

.woocommerce div.product .summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.woocommerce div.product .summary .product_title {
    margin: 0 0 1rem;
    color: var(--woo-green);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.25;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
    color: var(--woo-muted);
    line-height: 1.75;
}
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary .stock,
.woocommerce div.product form.cart {
    display: none !important;
}

/* Khối CTA báo giá (vsetp_woo_quote_button) */
.vsetp-woo-cta {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--woo-line);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.vsetp-woo-cta .vs-btn .vs-ico {
    width: 18px;
    height: 18px;
}
.vsetp-woo-cta__note {
    flex: 1 0 100%;
    margin: .25rem 0 0;
    color: var(--woo-muted);
    font-size: .875rem;
    line-height: 1.6;
}

/* Tab mô tả */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0 0 1.25rem;
    padding: 0 0 .5rem;
    border-bottom: 1px solid var(--woo-line);
    list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0 .5rem 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: .5rem .25rem;
    color: var(--woo-green);
    font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs .panel {
    color: var(--woo-ink);
    line-height: 1.8;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
    display: none;
}

/* Sản phẩm liên quan */
.woocommerce .related.products {
    grid-column: 1 / -1;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--woo-line);
}
.woocommerce .related.products > h2 {
    margin: 0 0 1.25rem;
    color: var(--woo-green);
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

/* =========================================================================
   PHÂN TRANG
   ========================================================================= */
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 2rem 0 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    border: 0;
    overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 .75rem;
    border: 1px solid var(--woo-line);
    border-radius: 8px;
    background: #fff;
    color: var(--woo-green);
    font-weight: 700;
    line-height: 1;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--woo-green);
    border-color: var(--woo-green);
    color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: var(--woo-green);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .woocommerce div.product {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
    .vsetp-woo-cta .vs-btn {
        flex: 1 1 auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product {
        transition: none;
    }
    .woocommerce ul.products li.product:hover {
        transform: none;
    }
}

/* =========================================================================
   KHUNG CHỨA
   Theme cha không bọc nội dung WooCommerce trong .vs-container nên trang
   cửa hàng / chi tiết sản phẩm chạy sát mép màn hình. Dựng lại đúng khung
   của theme: max-width 1200px, padding ngang 2rem (1rem ở mobile).
   ========================================================================= */
.woocommerce .content-area {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 2rem;
    padding-block: clamp(1.5rem, 4vw, 3rem);
    box-sizing: border-box;
}
.woocommerce .woocommerce-breadcrumb {
    margin: 0 0 1rem;
    color: var(--woo-muted);
    font-size: .875rem;
}
.woocommerce .woocommerce-breadcrumb a {
    color: var(--woo-green);
}
.woocommerce .content-area .page-title,
.woocommerce .content-area .woocommerce-products-header__title {
    margin: 0 0 .75rem;
    color: var(--woo-green);
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    line-height: 1.2;
}
@media (max-width: 640px) {
    .woocommerce .content-area {
        padding-inline: 1rem;
    }
}