/*
Theme Name: Kim Phat GeneratePress
Theme URI: https://kimphat.vn/
Description: Custom GeneratePress child theme for Kim Phat B2B website.
Author: Kim Phat Handicrafts
Author URI: https://kimphat.vn/
Template: generatepress
Version: 1.3.0
Text Domain: kimphat-generatepress
*/

/*
 * ============================================================
 * KIM PHAT B2B PRODUCT PRESENTATION
 * Single Product V1.1
 * Product Category V1.0
 * ============================================================
 *
 * Presentation layer only.
 * Business data remains owned by Kim Phat Core.
 */


/* ============================================================
   PART A — SINGLE PRODUCT V1.1
   ============================================================ */


/* ------------------------------------------------------------
   1. SINGLE PRODUCT – PAGE FOUNDATION
------------------------------------------------------------ */

.single-product .site-content {
    display: block;
    padding: 0;
}

.single-product #primary {
    width: 100%;
    max-width: none;
}

.single-product .widget-area {
    display: none;
}

.kim-phat-product {
    width: 100%;
}

.kp-product {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------------
   2. PRODUCT HERO
------------------------------------------------------------ */

.kp-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: clamp(40px, 6vw, 90px);

    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
    padding: 70px 0 80px;
    align-items: start;
}


/* ------------------------------------------------------------
   3. PRODUCT MEDIA
------------------------------------------------------------ */

.kp-product-media {
    min-width: 0;
}

.kp-product-featured-image {
    background: #f6f6f3;
    overflow: hidden;
}

.kp-product-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.kp-product-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.kp-product-gallery-item {
    background: #f6f6f3;
    overflow: hidden;
}

.kp-product-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}


/* ------------------------------------------------------------
   4. PRODUCT SUMMARY
------------------------------------------------------------ */

.kp-product-summary {
    min-width: 0;
}

.kp-product-code {
    margin: 0 0 12px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kp-product-title {
    margin: 0 0 30px;

    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.025em;
}


/* ------------------------------------------------------------
   5. CATEGORY + MATERIAL
------------------------------------------------------------ */

.kp-product-taxonomy {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 18px;

    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.kp-product-taxonomy:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.kp-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

.kp-taxonomy-links {
    font-size: 15px;
    line-height: 1.6;
}

.kp-taxonomy-links a {
    text-decoration: none;
}

.kp-taxonomy-links a:hover {
    text-decoration: underline;
}


/* ------------------------------------------------------------
   6. PRODUCT SPECIFICATIONS
------------------------------------------------------------ */

.kp-product-specifications {
    margin-top: 42px;
}

.kp-product-specifications h2,
.kp-product-customization h2 {
    margin: 0 0 18px;

    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
}

.kp-spec-list {
    margin: 0;
}

.kp-spec-row {
    display: grid;
    grid-template-columns: 175px 1fr;
    gap: 22px;

    margin: 0;
    padding: 13px 0;

    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.kp-spec-row:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.kp-spec-row dt {
    margin: 0;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

.kp-spec-row dd {
    margin: 0;

    font-size: 15px;
    line-height: 1.55;
}


/* ------------------------------------------------------------
   7. CUSTOMIZATION
------------------------------------------------------------ */

.kp-product-customization {
    margin-top: 40px;
}

.kp-product-customization p {
    margin: 0;

    font-size: 15px;
    line-height: 1.75;
}


/* ------------------------------------------------------------
   8. PRIMARY B2B INQUIRY
------------------------------------------------------------ */

.kp-product-inquiry {
    margin-top: 45px;
    padding: 30px;

    background: #f3f2ed;
}

.kp-product-inquiry h2 {
    margin: 0 0 12px;

    font-size: 23px;
    line-height: 1.25;
    font-weight: 500;
}

.kp-product-inquiry p {
    margin: 0 0 22px;

    font-size: 15px;
    line-height: 1.7;
}

.kp-inquiry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 12px 25px;

    border: 1px solid #222;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.kp-inquiry-button:hover,
.kp-inquiry-button:focus {
    background: #222;
    color: #fff;
}


/* ------------------------------------------------------------
   9. PRODUCT DESCRIPTION
------------------------------------------------------------ */

.kp-product-description {
    width: min(1000px, calc(100% - 80px));
    margin: 0 auto;
    padding: 85px 0;
}

.kp-product-description h2 {
    margin: 0 0 28px;

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.2;
    font-weight: 500;
}

.kp-product-description-content {
    max-width: 820px;

    font-size: 17px;
    line-height: 1.85;
}

.kp-product-description-content > *:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   10. MANUFACTURING / TRUST
------------------------------------------------------------ */

.kp-product-manufacturing {
    width: 100%;
    padding: 85px max(40px, calc((100% - 1000px) / 2));

    background: #f3f2ed;
}

.kp-product-manufacturing h2 {
    max-width: 800px;
    margin: 0 0 25px;

    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1.15;
    font-weight: 500;
}

.kp-product-manufacturing p {
    max-width: 820px;
    margin: 0 0 15px;

    font-size: 16px;
    line-height: 1.8;
}

.kp-product-manufacturing p:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   11. FINAL CTA
------------------------------------------------------------ */

.kp-product-final-cta {
    width: min(1000px, calc(100% - 80px));
    margin: 0 auto;
    padding: 95px 0;

    text-align: center;
}

.kp-product-final-cta h2 {
    margin: 0 0 18px;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 500;
}

.kp-product-final-cta p {
    max-width: 650px;
    margin: 0 auto 30px;

    font-size: 16px;
    line-height: 1.75;
}


/* ------------------------------------------------------------
   12. SINGLE PRODUCT – TABLET
------------------------------------------------------------ */

@media (max-width: 1024px) {

    .kp-product-hero {
        grid-template-columns: 1fr 1fr;
        gap: 38px;

        width: min(100% - 48px, 1200px);
        padding: 55px 0 65px;
    }

    .kp-product-title {
        font-size: clamp(30px, 4vw, 42px);
    }

    .kp-product-taxonomy {
        grid-template-columns: 125px 1fr;
    }

    .kp-spec-row {
        grid-template-columns: 145px 1fr;
    }

}


/* ------------------------------------------------------------
   13. SINGLE PRODUCT – MOBILE
------------------------------------------------------------ */

@media (max-width: 768px) {

    .kp-product-hero {
        display: block;

        width: calc(100% - 36px);
        padding: 30px 0 55px;
    }

    .kp-product-summary {
        margin-top: 35px;
    }

    .kp-product-title {
        margin-bottom: 24px;

        font-size: 34px;
    }

    .kp-product-gallery {
        gap: 8px;
        margin-top: 8px;
    }

    .kp-product-taxonomy {
        grid-template-columns: 1fr;
        gap: 3px;

        padding: 11px 0;
    }

    .kp-product-specifications {
        margin-top: 35px;
    }

    .kp-spec-row {
        grid-template-columns: 1fr;
        gap: 4px;

        padding: 12px 0;
    }

    .kp-product-customization {
        margin-top: 35px;
    }

    .kp-product-inquiry {
        margin-top: 38px;
        padding: 25px 22px;
    }

    .kp-product-description {
        width: calc(100% - 36px);
        padding: 60px 0;
    }

    .kp-product-manufacturing {
        padding: 60px 18px;
    }

    .kp-product-final-cta {
        width: calc(100% - 36px);
        padding: 70px 0;
    }

}


/* ------------------------------------------------------------
   14. SINGLE PRODUCT – SMALL MOBILE
------------------------------------------------------------ */

@media (max-width: 480px) {

    .kp-product-gallery {
        grid-template-columns: 1fr;
    }

    .kp-product-title {
        font-size: 30px;
    }

    .kp-inquiry-button {
        width: 100%;
    }

}


/* ============================================================
   PART B — PRODUCT CATEGORY V1.0
   ============================================================ */


/* ------------------------------------------------------------
   15. PRODUCT CATEGORY – PAGE FOUNDATION
------------------------------------------------------------ */

.tax-product-category .site-content {
    display: block;
    padding: 0;
}

.tax-product-category #primary {
    width: 100%;
    max-width: none;
}

.tax-product-category .widget-area {
    display: none;
}

.kp-category {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------------
   16. CATEGORY HERO
------------------------------------------------------------ */

.kp-category-hero {
    width: 100%;
    padding: clamp(75px, 9vw, 125px) 40px;

    background: #f3f2ed;
}

.kp-category-hero-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.kp-category-eyebrow {
    margin: 0 0 18px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kp-category-title {
    max-width: 900px;
    margin: 0;

    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.kp-category-description {
    max-width: 760px;
    margin-top: 28px;

    font-size: 17px;
    line-height: 1.8;
}

.kp-category-description > *:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   17. PRODUCT COLLECTION
------------------------------------------------------------ */

.kp-category-products {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
    padding: 85px 0 100px;
}

.kp-category-products-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 38px;
    padding-bottom: 20px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.kp-category-products-title {
    margin: 0;

    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 500;
}

.kp-category-product-count {
    margin: 0;

    font-size: 14px;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   18. PRODUCT GRID
------------------------------------------------------------ */

.kp-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 52px 28px;
}

.kp-product-card {
    min-width: 0;
}

.kp-product-card-image {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 5;

    margin-bottom: 22px;

    background: #f6f6f3;
    overflow: hidden;
}

.kp-product-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.kp-product-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.kp-product-card:hover .kp-product-card-image img {
    transform: scale(1.025);
}


/* ------------------------------------------------------------
   19. PRODUCT CARD CONTENT
------------------------------------------------------------ */

.kp-product-card-code {
    margin: 0 0 8px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.kp-product-card-title {
    margin: 0 0 10px;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

.kp-product-card-title a {
    text-decoration: none;
}

.kp-product-card-title a:hover,
.kp-product-card-title a:focus {
    text-decoration: underline;
}

.kp-product-card-material {
    margin: 0 0 17px;

    font-size: 14px;
    line-height: 1.55;
}

.kp-product-card-link {
    display: inline-block;

    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.kp-product-card-link:hover,
.kp-product-card-link:focus {
    opacity: 0.65;
}


/* ------------------------------------------------------------
   20. CATEGORY PAGINATION
------------------------------------------------------------ */

.kp-category-pagination {
    margin-top: 65px;
}

.kp-category-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kp-category-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;

    border: 1px solid rgba(0, 0, 0, 0.18);

    text-decoration: none;
}

.kp-category-pagination .page-numbers.current {
    background: #222;
    color: #fff;
    border-color: #222;
}


/* ------------------------------------------------------------
   21. CATEGORY MANUFACTURING / TRUST
------------------------------------------------------------ */

.kp-category-manufacturing {
    width: 100%;
    padding: clamp(75px, 8vw, 110px) 40px;

    background: #f3f2ed;
}

.kp-category-manufacturing-inner {
    width: min(1000px, 100%);
    margin: 0 auto;
}

.kp-category-manufacturing h2 {
    max-width: 820px;
    margin: 0 0 25px;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.kp-category-manufacturing p {
    max-width: 820px;
    margin: 0 0 15px;

    font-size: 16px;
    line-height: 1.8;
}

.kp-category-manufacturing p:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   22. CATEGORY FINAL CTA
------------------------------------------------------------ */

.kp-category-final-cta {
    width: min(1000px, calc(100% - 80px));
    margin: 0 auto;
    padding: 100px 0;

    text-align: center;
}

.kp-category-final-cta h2 {
    margin: 0 0 18px;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.kp-category-final-cta p {
    max-width: 680px;
    margin: 0 auto 30px;

    font-size: 16px;
    line-height: 1.75;
}


/* ------------------------------------------------------------
   23. PRODUCT CATEGORY – TABLET
------------------------------------------------------------ */

@media (max-width: 1024px) {

    .kp-category-hero {
        padding-left: 24px;
        padding-right: 24px;
    }

    .kp-category-products {
        width: calc(100% - 48px);
        padding: 70px 0 85px;
    }

    .kp-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px 24px;
    }

    .kp-category-manufacturing {
        padding-left: 24px;
        padding-right: 24px;
    }

}


/* ------------------------------------------------------------
   24. PRODUCT CATEGORY – MOBILE
------------------------------------------------------------ */

@media (max-width: 768px) {

    .kp-category-hero {
        padding: 60px 18px;
    }

    .kp-category-title {
        font-size: clamp(38px, 12vw, 52px);
    }

    .kp-category-description {
        margin-top: 22px;
        font-size: 16px;
    }

    .kp-category-products {
        width: calc(100% - 36px);
        padding: 60px 0 70px;
    }

    .kp-category-products-header {
        display: block;
        margin-bottom: 30px;
    }

    .kp-category-product-count {
        margin-top: 10px;
    }

    .kp-product-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .kp-product-card-image {
        margin-bottom: 18px;
    }

    .kp-category-pagination {
        margin-top: 50px;
    }

    .kp-category-manufacturing {
        padding: 60px 18px;
    }

    .kp-category-final-cta {
        width: calc(100% - 36px);
        padding: 70px 0;
    }

}


/* ------------------------------------------------------------
   25. PRODUCT CATEGORY – SMALL MOBILE
------------------------------------------------------------ */

@media (max-width: 480px) {

    .kp-category-title {
        font-size: 38px;
    }

    .kp-product-card-title {
        font-size: 21px;
    }

}

/* Product full-size image links: native navigation, no additional scripts. */
.kp-product-image-link { display: block; cursor: zoom-in; }
.single-product .kp-product-media .kp-product-image-link:focus-visible { outline: 2px solid #285848; outline-offset: -3px; }
.kp-product-media-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #555; }