/*
BMC HOMEMART — CSS หลัก
สารบัญ: 01 Header/Navigation | 02 Hero/Slider | 03 Intro | 04 Material Sections
      | 05 Services/Projects | 06 CTA/Contact/Footer | 07 Product UI | 08 Responsive
      | 09 Language | 10 LINE/Social | 11 Overflow protection
*/
/* =========================================================
   BMC HOMEMART
   MAIN STYLE
========================================================= */


/* ==========================================
   RESET
========================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Prompt",
        sans-serif;

    background: #f8f7f4;

    color: #202020;

    line-height: 1.7;

}


a {

    text-decoration: none;

    color: inherit;

}


img {

    max-width: 100%;

    display: block;

}


.container {

    width: 90%;

    max-width: 1250px;

    margin: auto;

}


/* ==========================================
   HEADER
========================================== */

.header {

    height: 82px;

    background: #fff;

    position: sticky;

    top: 0;

    z-index: 999;

    border-bottom:
        1px solid #eee;

}


.nav {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

}


.logo {

    flex-shrink: 0;

}


.logo img {

    width: 200px;

    height: auto;

}


nav {

    display: flex;

    gap: 28px;

    margin-left: auto;

    margin-right: 25px;

}


nav a {

    font-size: 16px;

    transition: .3s;

}


nav a:hover {

    color: #a17a42;

}


.header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.cart-btn {

    padding:
        8px 13px;

    border:
        1px solid #ddd;

    border-radius: 8px;

    background: #fff;

    transition: .3s;

}


.cart-btn:hover {

    border-color:
        #a17a42;

}


#cartCount {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 20px;

    height: 20px;

    padding: 0 5px;

    border-radius: 50%;

    background: #a17a42;

    color: white;

    font-size: 11px;

}


.mobile-menu {

    display: none;

    border: 0;

    background: none;

    font-size: 25px;

    cursor: pointer;

}


/* ==========================================
   MOBILE NAV
========================================== */

@media(max-width: 900px) {

    nav {

        display: none;

        position: absolute;

        top: 82px;

        left: 0;

        width: 100%;

        margin: 0;

        padding: 20px;

        background: white;

        flex-direction: column;

        gap: 0;

        border-top:
            1px solid #eee;

        box-shadow:
            0 10px 25px
            rgba(0,0,0,.08);

    }


    nav.show {

        display: flex;
            
    }


    nav a {

        padding: 12px 0;

        border-bottom:
            1px solid #eee;

    }


    .mobile-menu {

        display: block;

    }

}


/* ==========================================
   HERO
========================================== */

.hero {

    position: relative;

    width: 100%;

    height: 600px;

    overflow: hidden;

    color: #fff;

    /*border-radius: 50px;*/

}


.hero-slider {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}


.hero-track {

    display: flex;

    width: 100%;

    height: 100%;

    transform:
        translateX(0);

    transition:
        transform .8s
        ease-in-out;

    will-change: transform;

}


.hero-slide {

    flex:
        0 0 100%;

    width: 100%;

    height: 100%;

    position: relative;

}


.hero-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.25);

    z-index: 2;

    pointer-events: none;

}


.hero-content {

    position: absolute;

    top: 50%;

    left: 60%;

    transform:
        translate(-50%,-50%);

    width: 90%;

    max-width: 1250px;

    z-index: 3;

}


.eyebrow {

    font-size: 18px;

    letter-spacing: 4px;

    font-weight: 500;

}


.gold {

    color: #a17a42;

}


.hero h1 {

    font-size: 55px;

    line-height: 1.05;

    margin: 25px 0;

    letter-spacing: -2px;

}


.hero-description {

    max-width: 600px;

    font-size: 18px;

    color: #eee;

}


/* ==========================================
   SLIDER BUTTON
========================================== */

.slider-btn {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 5;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.72);

    background:
        rgba(0,0,0,.08);

    color:
        rgba(255,255,255,.55);

    font-size: 38px;

    line-height: 42px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;

}


.slider-btn:hover {

    background:
        rgba(0,0,0,.12);

    color:
        rgba(255,255,255,.9);

}


.slider-prev {

    left: 25px;

}


.slider-next {

    right: 25px;

}


/* ==========================================
   SLIDER DOTS
========================================== */

.slider-dots {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 5;

    display: flex;

    gap: 10px;

}


.slider-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    border:
        1px solid #fff;

    background: transparent;

    padding: 0;

    cursor: pointer;

    transition: .3s;

}


.slider-dot.active {

    width: 28px;

    border-radius: 20px;

    background: #a17a42;

    border-color:
        #a17a42;

}


/* ==========================================
   BUTTON
========================================== */

.btn {

    display: inline-block;

    padding:
        13px 28px;

    border:
        1px solid transparent;

    cursor: pointer;

    font-family: inherit;

    border-radius: 8px;

}


.btn-gold {

    background: #a17a42;

    color: white;

}


.btn-gold:hover {

    background: #856332;

}


.btn-dark {

    background: #222;

    color: white;

    margin-left: 10px;

}


.btn-dark:hover {

    background: #444;

}


.btn-light {

    border-color: white;

    color: white;

}


/* ==========================================
   COLLECTION
========================================== */

.collection {

    padding: 100px 0;

}


.section-heading {

    margin-bottom: 50px;

}


.section-heading h1,
.section-heading h2 {

    font-size: 48px;

    line-height: 1.2;

    margin-top: 12px;

}


.collection-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 15px;

}


.collection-card {

    height: 200px;

    position: relative;

    overflow: hidden;

    border-radius: 50px;

}


.collection-card.large {

    height: 200px;

    position: relative;

    overflow: hidden;

    border-radius: 50px;

}


.collection-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}


.collection-card:hover img {

    transform:
        scale(1.06);

}


.collection-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 40%,
            rgba(0,0,0,.75)
        );

}


.collection-info {

    position: absolute;

    bottom: 30px;

    left: 35px;

    z-index: 2;

    color: white;

}


.collection-info small {

    color: #d4b27d;

}


.collection-info h3 {

    font-size: 34px;

    letter-spacing: 2px;

}


.collection-info p {

    color: #ddd;

}



/* ==========================================
   INTERIOR MATERIAL COLLECTION
========================================== */

.interior-material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.interior-material-card {
    height: 330px;
    /*border-radius: 28px;*/
}

.interior-material-card .collection-info {
    left: 30px;
    right: 30px;
    bottom: 26px;
}

.interior-material-card .collection-info h3 {
    margin: 5px 0 2px;
    font-size: clamp(25px, 3vw, 34px);
}

.collection-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    opacity: .95;
    transition: transform .3s ease;
}

.interior-material-card:hover .collection-link {
    transform: translateX(5px);
}

@media (max-width: 900px) {
    .interior-material-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .interior-material-card {
        height: 280px;
    }
}

@media (max-width: 600px) {
    .interior-material-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .interior-material-card,
    .collection-card.large.interior-material-card {
        height: 250px;
        /*border-radius: 24px;*/
    }

    .interior-material-card .collection-info {
        left: 24px;
        right: 24px;
        bottom: 22px;
    }

    .interior-material-card .collection-info h3 {
        font-size: 25px;
    }
}

/* ==========================================
   SERVICES
========================================== */

.services {

    padding: 110px 0;

    background: #c4bfb1;

    color: white;

    /*border-radius: 50px;*/

}


.light h2 {

    color: white;

}


.service-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 1px;

}


.service {

    background: #797272;

    padding: 45px;

    /*border-radius: 50px;*/

}


.service span {

    color: #a17a42;

    font-size: 14px;

}


.service h3 {

    font-size: 10px;

    margin: 20px 0;

}


.service p {

    color: #ddd;

}


/* ==========================================
   PROJECT
========================================== */

.projects {

    padding: 110px 0;

    background: white;

}


.project-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 20px;

}


.project {

    position: relative;

    height: 450px;

    overflow: hidden;

    border-radius: 50px;

}


.project img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50px;

}


.project div {

    position: absolute;

    bottom: 25px;

    left: 25px;

    color: white;

}


.project span {

    font-size: 11px;

    letter-spacing: 2px;

    color: #d4b27d;

}


/* ==========================================
   CTA
========================================== */

.cta {

    padding: 130px 20px;

    text-align: center;

    color: white;

    background:
        linear-gradient(
            rgba(0,0,0,.65),
            rgba(0,0,0,.65)
        ),
        url(
            "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=2000&q=90"
        )
        center/cover;

    /*border-radius: 50px;*/

}


.cta h2 {

    font-size: 52px;

    line-height: 1.2;

    margin: 25px 0 35px;

}


/* ==========================================
   CONTACT
========================================== */

.contact {

    padding: 110px 0;

}


.contact-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

}


.contact h2 {

    font-size: 50px;

    margin: 15px 0 40px;

}


.contact-item {

    margin: 25px 0;

}


.contact-item strong {

    color: #a17a42;

}


.contact-box {

    background: white;

    padding: 45px;

    border-radius: 20px;

}


.contact-box h3 {

    font-size: 28px;

    margin-bottom: 10px;

}


.contact-box p {

    color: #777;

    margin-bottom: 25px;

}


input,
textarea,
select {
        width: 100%;

    padding: 14px;

    border:

        1px solid #ddd;

    margin-bottom: 15px;

    font-family: inherit;

    background: white;

    border-radius: 10px;

    outline: none;

}

input:focus,

textarea:focus,

select:focus {

    border-color: #a17a42;

}

textarea {

    min-height: 130px;

    resize: vertical;

}

/* ==========================================

   PRODUCTS

========================================== */

.products-page {

    padding: 100px 0;

}

.product-toolbar {

    display: grid;

    grid-template-columns:

        2fr 1fr;

    gap: 15px;

    margin-bottom: 40px;

}

.product-catalog {

    display: grid;

    grid-template-columns:

        repeat(3,1fr);

    gap: 25px;

}

.product-card {

    background: white;

    border:

        1px solid #eee;

    transition: .3s;

    border-radius: 25px;

    overflow: hidden;

}

.product-card:hover {

    transform:

        translateY(-5px);

    box-shadow:

        0 15px 40px

        rgba(0,0,0,.08);

}

.product-card img {

    width: 100%;

    height: 330px;

    object-fit: cover;

}

.product-card-content {

    padding: 25px;

}

.product-card-content span {

    font-size: 11px;

    color: #a17a42;

    letter-spacing: 2px;

}

.product-card-content h3 {

    font-size: 22px;

    margin: 8px 0;

}

.product-card-content p {

    color: #777;

    font-size: 14px;

    min-height: 60px;

}

.product-bottom {

    display: flex;

    justify-content:

        space-between;

    align-items: center;

    margin-top: 20px;

}

.product-bottom strong {

    font-size: 15px;

}

.product-bottom button {

    background: #1b1b1b;

    color: white;

    border: 0;

    padding:

        9px 15px;

    cursor: pointer;

    border-radius: 7px;

}

/* ==========================================

   CART

========================================== */

.cart-page {

    padding: 100px 0;

    min-height: 600px;

}

.cart-item {

    display: flex;

    justify-content:

        space-between;

    align-items: center;

    background: white;

    padding: 25px;

    margin-bottom: 10px;

    border:

        1px solid #eee;

    border-radius: 12px;

}

.cart-item-info {

    display: flex;

    flex-direction: column;

}

.cart-item-info small {

    color: #a17a42;

}

.cart-item-info strong {

    font-size: 18px;

}

.cart-item-control {

    display: flex;

    align-items: center;

    gap: 25px;

}

.quantity-control {

    display: flex;

    align-items: center;

    gap: 10px;

}

.quantity-control button {

    width: 30px;

    height: 30px;

    border:

        1px solid #ddd;

    background: white;

    cursor: pointer;

    border-radius: 5px;

}

.cart-subtotal {

    min-width: 110px;

    text-align: right;

}

.remove-cart {

    border: 0;

    background: none;

    color: #b33;

    cursor: pointer;

}

.cart-total {

    display: flex;

    justify-content:

        space-between;

    background: #222;

    color: white;

    padding: 20px 25px;

    border-radius: 10px;

    margin-top: 20px;

}

.cart-total strong {

    color: #d4b27d;

}

.cart-note {

    color: #888;

    font-size: 13px;

    margin-top: 10px;

}

.cart-summary {

    background: white;

    padding: 40px;

    margin-top: 30px;

    max-width: 650px;

    border-radius: 20px;

}

.cart-summary h2 {

    margin-bottom: 10px;

}

.cart-summary p {

    color: #777;

    margin-bottom: 25px;

}

.cart-empty {

    text-align: center;

    background: white;

    padding: 70px 30px;

    border-radius: 20px;

}

.cart-empty h3 {

    font-size: 25px;

    margin-bottom: 10px;

}

.cart-empty p {

    color: #777;

    margin-bottom: 25px;

}

/* =========================================
   PRODUCT DETAIL

========================================== */

.product-detail-page {

    padding: 80px 0;

    min-height: 650px;

}

.product-detail-grid {

    display: grid;

    grid-template-columns:

        1.2fr 1fr;

    gap: 70px;

    align-items: start;

}

.product-detail-images {

    width: 100%;

}

.main-product-image {

    width: 100%;

    background: #f5f5f5;

    border-radius: 16px;

    overflow: hidden;

    cursor: zoom-in;

}

.main-product-image img {

    width: 100%;

    height: 520px;

    object-fit: cover;

    transition: .3s;

}

.main-product-image:hover img {

    transform:

        scale(1.02);

}

.product-thumbnails {

    display: flex;

    gap: 12px;

    margin-top: 15px;

    overflow-x: auto;

}

.product-thumbnails img {

    width: 90px;

    height: 90px;

    object-fit: cover;

    border-radius: 10px;

    cursor: pointer;

    border:

        2px solid transparent;

    opacity: .65;

    transition: .25s;

    flex-shrink: 0;

}

.product-thumbnails img:hover,

.product-thumbnails img.active {

    border-color:

        #b79b5b;

    opacity: 1;

}

.product-category {

    font-size: 14px;

    letter-spacing: 2px;

    color: #b89b5e;

}

.product-detail-info h1 {

    font-size: 42px;

    margin:

        15px 0 25px;

}

.product-detail-description {

    line-height: 1.9;

    color: #666;

    margin-bottom: 30px;

}

.product-detail-price {

    font-size: 28px;

    font-weight: 600;

    margin-bottom: 30px;

}

.product-add-btn {

    border: 0;

}

.back-products {

    display: block;

    margin-top: 25px;

    color: #555;

}

.product-not-found {

    text-align: center;

    background: white;

    padding: 80px 30px;

    border-radius: 20px;

}

/* ==========================================

   LIGHTBOX

========================================== */

.product-image-lightbox {

    position: fixed;

    inset: 0;

    background:

        rgba(0,0,0,.88);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    transition: .3s;

    z-index: 99999;

}

.product-image-lightbox.active {

    opacity: 1;

    visibility: visible;

}

.product-image-lightbox > img {

    max-width: 92vw;

    max-height: 90vh;

    object-fit: contain;

    border-radius: 8px;

}

.lightbox-close {

    position: absolute;

    top: 20px;

    right: 25px;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: white;

    color: #222;

    font-size: 30px;

    cursor: pointer;

}

/* ==========================================

   FOOTER

========================================== */

footer {

    background: #171717;

    color: white;

    padding:

        70px 0 20px;

}

.footer-grid {

    display: grid;

    grid-template-columns:

        1.5fr 1fr 1fr 1.2fr;

    gap: 25px;
    align-items: start;


}

.footer-logo {

    margin-bottom: 15px;

}

.footer-logo img {

    width: 180px;

    height: auto;

}

footer p,

footer a {

    color: #999;

    display: block;

    margin: 8px 0;

    font-size: 14px;

}

footer h4 {

    margin-bottom: 15px;

}

footer a:hover {

    color: #d4b27d;

}

.copyright {

    border-top:

        1px solid #333;

    margin-top: 50px;

    padding-top: 20px;

    text-align: center;

    color: #777;

    font-size: 13px;

}

/* ==========================================

   FOOTER SOCIAL

========================================== */

.footer-social {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

}

.footer-social a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: white;

}

.footer-social img {

    width: 24px;

    height: 24px;

    object-fit: contain;

}

/* ==========================================

   FLOATING CONTACT

========================================== */

.floating-contact {

    position: fixed;

    right: 40px;

    bottom: 80px;

    z-index: 99999;

}

.floating-main {

    width: 60px;

    height: 60px;

    border: none;

    border-radius: 50%;

    background: #a17a42;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:

        0 5px 20px

        rgba(0,0,0,.20);

    transition: .3s;

}

.floating-main img {

    width: 70px;

    height: 70px;

    object-fit: contain;

}

.floating-main:hover {

    background: #856332;

    transform:

        scale(1.05);

}

.floating-menu {

    position: absolute;

    right: 0;

    bottom: 70px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    opacity: 0;

    visibility: hidden;

    transform:

        translateY(15px)

        scale(.95);

    transform-origin:

        bottom right;

    transition:

        opacity .3s,

        transform .3s,

        visibility .3s;

}

.floating-contact.active

.floating-menu {

    opacity: 1;

    visibility: visible;

    transform:

        translateY(0)

        scale(1);

}

.floating-item {

    min-width: 155px;

    height: 48px;

    padding:

        8px 15px;

    background: white;

    color: #333;

    border-radius: 25px;

    display: flex;

    align-items: center;

    gap: 10px;

    box-shadow:

        0 4px 18px

        rgba(0,0,0,.15);

    font-size: 14px;

    transition: .3s;

}

.floating-item img {

    width: 27px;

    height: 27px;

    object-fit: contain;

}

.floating-item:hover {

    transform:

        translateX(-5px);

    box-shadow:

        0 7px 22px

        rgba(0,0,0,.22);

}

/* ==========================================

   SEARCH BUTTON

========================================== */

.search-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    margin-left: 8px;

}

.search-btn img {

    width: 22px;

    height: 22px;

    object-fit: contain;

}

.search-btn:hover img {

    transform:

        scale(1.1);

}

/* ==========================================

   MOBILE

========================================== */

@media(max-width: 900px) {

    .hero {

        height: 650px;

    }

    .hero-content {

        left: 50%;

        width: 85%;

    }

    .hero h1 {

        font-size: 45px;

    }

    .slider-btn {

        width: 42px;

        height: 42px;

        font-size: 30px;

    }

    .slider-prev {

        left: 12px;

    }

    .slider-next {

        right: 12px;

    }

    .intro-grid,

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .product-catalog {

        grid-template-columns:

            repeat(2,1fr);

    }

    .project-grid {

        grid-template-columns:

            1fr 1fr;

    }

    .footer-grid {

        grid-template-columns:

            1fr 1fr;

    }

    .product-detail-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .cart-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

    .cart-item-control {

        width: 100%;

        justify-content:

            space-between;

    }

}

@media(max-width: 600px) {

    .container {

        width: 92%;

    }

    .logo img {

        width: 160px;

    }

    .hero {

        height: 600px;

        

    }

    .hero-content {

        width: 80%;

    }

    .hero h1 {

        font-size: 35px;

    }

    .hero-description {

        font-size: 15px;

    }

    .slider-btn {

        width: 38px;

        height: 38px;

        font-size: 27px;

    }

    .slider-dots {

        bottom: 20px;

    }

    .section-heading h1,

    .section-heading h2 {

        font-size: 35px;

    }

    .collection-grid,

    .product-catalog,

    .project-grid,

    .service-grid {

        grid-template-columns: 1fr;

    }

    .collection-card,

    .collection-card.large {

        height: 220px;

    }

    .product-toolbar {

        grid-template-columns: 1fr;

    }

    .footer-grid {

        grid-template-columns: 1fr;

    }

    .main-product-image img {

        height: 350px;

    }

    .product-thumbnails img {

        width: 75px;

        height: 75px;

    }

    .product-detail-info h1 {

        font-size: 30px;

    }

    .btn-dark {

        margin-left: 0;

        margin-top: 10px;

    }

    .cart-summary {

        padding: 25px;

    }

    .cart-item-control {

        flex-wrap: wrap;

    }

    .floating-contact {

        right: 15px;

        bottom: 15px;

    }

    .floating-main {

        width: 52px;

        height: 52px;

    }

    .floating-menu {

        bottom: 63px;

    }

    .floating-item {

        min-width: 145px;

        height: 45px;

        font-size: 13px;

    }

}

/* ==========================================
   ABOUT US - SECTION 1
========================================== */

.intro {
    padding: 50px 0;
    background: #fff;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: center;
}

.intro-image {
    overflow: hidden;
    border-radius: 40px;
}

.intro-image img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: 40px;
}

.intro-content {
    padding: 20px;
}

.intro-content h2 {
    font-size: 42px;
    line-height: 1.3;
    margin: 20px 0 30px;
    color: #222;
}

.intro-content p {
    color: #777;
    margin-bottom: 20px;
}


/* ==========================================
   ABOUT US - SECTION 2
========================================== */

.about-detail {
    padding: 50px 0;
    background: #f8f7f4;
}

.about-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: center;
}

.about-detail-content {
    padding: 20px;
}

.about-detail-content h2 {
    font-size: 42px;
    line-height: 1.3;
    margin: 20px 0 30px;
}

.about-detail-content p {
    color: #777;
    margin-bottom: 20px;
}

.about-detail-image {
    overflow: hidden;
    border-radius: 40px;
}

.about-detail-image img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    transition: .5s;
    border-radius: 40px;
}

.about-detail-image:hover img {
    transform: scale(1.03);
}


/* ==========================================
   ABOUT MOBILE
========================================== */

@media (max-width: 900px) {

    .intro-grid,
    .about-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .intro-image img,
    .about-detail-image img {
        height: 400px;
    }

}


@media (max-width: 600px) {

    .intro,
    .about-detail {
        padding: 80px 0;
    }

    .intro-content h2,
    .about-detail-content h2 {
        font-size: 32px;
    }

    .intro-image img,
    .about-detail-image img {
        height: 300px;
    }

}

/* ==========================================
   EXTERIOR MATERIAL COLLECTION
========================================== */

.exterior-materials {
    background: #f8f7f4;
}

.exterior-material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exterior-material-card {
    height: 330px;
    border-radius: 28px;
}

.exterior-material-card .collection-info {
    left: 30px;
    right: 30px;
    bottom: 26px;
}

.exterior-material-card .collection-info h3 {
    margin: 5px 0 2px;
    font-size: clamp(22px, 2.7vw, 32px);
}

.collection-more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

@media (max-width: 900px) {
    .exterior-material-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exterior-material-card {
        height: 280px;
    }
}

@media (max-width: 600px) {
    .exterior-material-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .exterior-material-card,
    .collection-card.large.exterior-material-card {
        height: 250px;
        border-radius: 24px;
    }

    .exterior-material-card .collection-info {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .exterior-material-card .collection-info h3 {
        font-size: 22px;
    }
}

/* =========================================================
   MATERIAL SHOWCASE — BMC / REMOOD-INSPIRED LAYOUT
   Uses BMC's existing products and imagery; no remood assets.
========================================================= */
.material-showcase{
    padding:110px 0;
    background:#fff
}
.material-container{
    max-width:1320px;
    width:100%;
    margin:0 auto;
    box-sizing:border-box;
}
.material-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:35px;
    margin-bottom:38px
}
.material-heading h2{
    font-size:clamp(32px,4vw,52px);
    line-height:1.06;
    font-weight:500;
    letter-spacing:-1.5px;
    margin-top:10px
}
.material-heading-copy{
    max-width:430px;
    color:#686868;
    font-size:16px;
    line-height:1.8
}
.material-switch{
    display:none
}
.material-switch-btn{
    border:0;
    background:transparent;
    padding:10px 2px;
    margin-right:25px;
    font:inherit;
    font-size:18px;
    color:#777;
    cursor:pointer;
    position:relative
}
.material-switch-btn.active{
    color:#171717;
    font-weight:600
}
.material-switch-btn
.active:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-17px;
    height:2px;
    background:#171717
}
.material-panel{
    display:block
}
.material-panel.active{
    display:block
}
.material-sticky-nav{
    position:sticky;
    top:82px;
    z-index:40;
    background:#fff;
    padding-top:1px;
}
.material-category-tabs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:10px 0 20px;
    scrollbar-width:none
}
.material-category-tabs::-webkit-scrollbar{
    display:none
}
.material-category-btn{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    flex:0 0 auto;
    border:1px solid #dedbd4;
    background:#f8f7f4;
    color:#555;
    border-radius:999px;
    padding:10px 19px;
    font:inherit;
    font-size:14px;
    cursor:pointer;
    transition:.25s
}
.material-category-btn:hover,
.material-category-btn.active{
    background:#202020;
    color:#fff;
    border-color:#202020
}
.material-category-panel{
    display:none
}
.material-category-panel.active{
    display:block
}
.material-section-heading{
    margin-top:70px
}
.material-section-heading:first-child{
    margin-top:0
}
.material-exterior-section{
    margin-top:100px
}
.material-feature{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(340px,.85fr);
    gap:55px;
    align-items:center;
    margin-top:15px
}
.material-gallery{
    display:grid;
    grid-template-columns:1.55fr .75fr;
    gap:12px;
    min-height:520px
}
.material-gallery>img,
.material-gallery-small img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:20px
}
.material-gallery-small{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:12px
}
.material-copy{
    padding:10px 20px 10px 0
}
.material-number{
    font-size:13px;
    color:#9a9a9a;
    letter-spacing:2px
}
.material-copy h3{
    font-size:clamp(35px,4vw,56px);
    font-weight:500;
    line-height:1.1;
    margin:10px 0 18px
}
.material-copy p{
    color:#686868;
    line-height:1.9;
    max-width:520px
}
.material-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:25px 0
}
.material-tags span{
    background:#f3f1ec;
    border-radius:999px;
    padding:7px 12px;
    font-size:12px;
    color:#555
}
.material-cta{
    display:inline-flex;
    align-items:center;
    gap:28px;
    border-bottom:1px solid #222;
    padding:10px 0;
    color:#181818;
    font-weight:500
}
.material-cta span{
    font-size:22px;
    transition:.25s
}
.material-cta:hover span{
    transform:translateX(6px)
}
@media(max-width:900px){
    .material-heading{
        align-items:flex-start;
        flex-direction:column;gap:18px
    }
    .material-feature{
        grid-template-columns:1fr;
        gap:32px
    }
    .material-gallery{
        min-height:430px
    }
    .material-copy{
        padding-right:0
    }
    .material-showcase{
        padding:80px 0
    }
}
@media(max-width:600px){
    .material-showcase{
        padding:65px 0
    }
    .material-heading h2{
        font-size:40px
    }
    .material-heading-copy{
        font-size:14px
    }
    .material-switch{
        display:none
    }
    .material-switch-btn{
        font-size:16px;
        margin-right:12px
    }
    .material-section-heading{
        margin-top:50px
    }
    .material-section-heading:first-child{
        margin-top:0
    }
    .material-exterior-section{
        margin-top:70px
    }
    .material-sticky-nav{
        top:82px
    }
    .material-category-tabs{
        margin-left:-2px
    }
    .material-gallery{
        grid-template-columns:1fr 72%;
        min-height:310px;
        height:310px;
        gap:8px
    }
    .material-gallery-small{
        gap:8px
    }
    .material-gallery>img,
    .material-gallery-small img{
        border-radius:14px
    }
    .material-copy h3{
        font-size:36px
    }
    .material-copy p{
        font-size:14px
    }
    .material-tags{
        margin:20px 0
    }
}

/* =========================================================
   PRODUCT CATALOG — REMOOD-INSPIRED
========================================================= */
.products-page{
    background:#fff;
    padding-top:95px;
    padding-bottom:120px
}
.products-page 
.section-heading{
    max-width:820px;
    margin-bottom:30px
}
.products-page 
.section-heading h1{
    font-size:clamp(42px,6vw,76px);
    font-weight:500;
    letter-spacing:-1.5px
}
.product-category-pills{
    display:flex;
    gap:9px;
    overflow-x:auto;
    padding:4px 0 24px;
    scrollbar-width:none
}
.product-category-pills::-webkit-scrollbar{
    display:none
}
.product-pill{
    border:1px solid #ddd9d0;
    background:#faf9f6;
    border-radius:999px;
    padding:10px 17px;
    white-space:nowrap;
    font:inherit;
    font-size:13px;
    cursor:pointer;
    color:#555
}
.product-pill
.active,
.product-pill:hover{
    background:#202020;
    color:#fff;
    border-color:#202020
}
.remood-product-toolbar{
    grid-template-columns:minmax(0,1.7fr) 220px 190px;
    align-items:center;
    margin:4px 0 18px
}
.remood-product-toolbar input,
.remood-product-toolbar select{
    height:50px;
    border:1px solid #ddd9d0;
    background:#fff;
    border-radius:0;
    padding:0 15px;
    font:inherit;
    color:#333;
    outline:none
}
.remood-product-toolbar input:focus,
.remood-product-toolbar select:focus{
    border-color:#333
}
.catalog-meta{
    display:flex;
    align-items:center;
    gap:6px;
    color:#777;
    font-size:13px;
    margin:10px 0 25px
}
.catalog-meta strong{
    color:#222;
    font-size:14px
}
.product-catalog{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px
}
.product-card{
    border:0;
    border-radius:0;
    background:#fff;
    box-shadow:none
}
.product-card:hover{
    transform:none;
    box-shadow:none
}
.product-card img{
    height:390px;
    background:#f3f1ec;
    border-radius:18px;
    transition:transform .45s ease
}
.product-card:hover img{
    transform:scale(1.015)
}
.product-card-content{
    padding:18px 2px 5px
}
.product-card-content span{
    font-size:10px;
    color:#8c7657;
    letter-spacing:1.8px
}
.product-card-content h3{
    font-size:21px;
    font-weight:500;
    margin:5px 0
}
.product-card-content p{
    font-size:13px;
    color:#777;
    min-height:45px;
    line-height:1.7
}
.product-bottom{
    border-top:1px solid #eee;
    padding-top:13px;
    margin-top:14px
}
.product-bottom button{
    border:1px solid #222;
    background:#222;
    color:#fff;
    border-radius:0;
    padding:8px 15px;
    font:inherit;
    font-size:12px;
    cursor:pointer
}
.product-bottom button:hover{
    background:#555
}
.product-bottom strong{
    font-weight:500
}
@media(max-width:900px){
    .remood-product-toolbar{
        grid-template-columns:1fr 1fr
    }
    .remood-product-toolbar input{
        grid-column:1/-1
    }
    .product-catalog{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:25px
    }
    .product-card img{
        height:300px
    }
}
@media(max-width:600px){
    .products-page{
        padding-top:65px
    }
    .products-page 
    .section-heading h1{
        font-size:42px
    }
    .remood-product-toolbar{
        grid-template-columns:1fr
    }
    .product-catalog{
        grid-template-columns:1fr 1fr;
        gap:18px
    }
    .product-card img{
        height:210px;
        border-radius:13px
    }
    .product-card-content h3{
        font-size:16px
    }
    .product-card-content p{
        font-size:12px;
        min-height:auto
    }
    .product-bottom{
        display:block
    }
    .product-bottom strong{
        display:block;
        margin-bottom:9px;
        font-size:13px
    }
    product-bottom button{
        width:100%
    }
}
@media(max-width:390px){
    .product-catalog{
        grid-template-columns:1fr
    }
    .product-card img{
        height:260px
    }
}

/* =========================================================
   FOOTER PRIVACY LINK - SAME LINE AS COPYRIGHT
========================================================= */
.copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
}

.footer-policy-links {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    white-space: nowrap;
}

.footer-privacy,
.footer-cookie {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    color: #999 !important;
    font-size: 13px !important;
    text-decoration: none;
    white-space: nowrap;
}

.footer-privacy:hover,
.footer-cookie:hover {
    color: #d4b27d !important;
}

.footer-policy-separator {
    color: #bbb;
    font-size: 13px;
}

@media (max-width: 700px) {
    .copyright {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    .footer-policy-links {
        justify-content: center;
        flex-wrap: wrap;
        white-space: normal;
    }

    .footer-privacy,
    .footer-cookie {
        white-space: normal;
    }
}


/* =========================================================
   BMC HOMEMART - FINAL RESPONSIVE / NEW CONTENT OVERRIDES
   Desktop layout remains unchanged; tablet/mobile are refined.
========================================================= */

/* HERO CTA */
.hero-buttons{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.hero-buttons .btn{
    min-width:155px;
    text-align:center;
}
.hero-buttons .hero-sample-btn{
    min-width:155px;
}

/* SERVICE CARDS */
.service-card{
    position:relative;
    display:block;
    min-height:390px;
    overflow:hidden;
    color:#fff !important;
    text-decoration:none;
    background:#222;
    padding:0;
}
.service-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s ease;
}
.service-card:hover img{
    transform:scale(1.04);
}
.service-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.08) 20%,rgba(0,0,0,.78) 100%);
}
.service-content{
    position:absolute;
    left:36px;
    right:30px;
    bottom:32px;
    z-index:2;
}
.service-content > span{
    color:#d4b27d;
    font-size:13px;
    letter-spacing:2px;
}
.service-content h3{
    color:#fff;
    font-size:20px;
    margin:10px 0;
}
.service-content p{
    color:#eee;
    line-height:1.75;
    max-width:440px;
    margin:0 0 14px;
}
.service-content b{
    color:#fff;
    font-size:14px;
    font-weight:500;
}

/* MATERIALS */
.material-heading h2 span{
    font-weight:500;
}
.material-gallery img{
    cursor:default;
}

/* PRODUCT CATALOG */
.product-subcategory{
    display:block;
    margin-top:3px;
    color:#999;
    font-size:11px;
    letter-spacing:.2px;
}
.product-card-image-wrap{
    overflow:hidden;
    border-radius:18px;
    background:#f3f1ec;
}
.product-inquiry-btn,
.product-add-btn-small{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    min-height:36px;
    padding:8px 12px;
    border:1px solid #222;
    border-radius:0;
    background:#222;
    color:#fff;
    font:inherit;
    font-size:12px;
    text-decoration:none;
    cursor:pointer;
}
.product-inquiry-btn:hover,
.product-add-btn-small:hover{
    background:#555;
}
.no-products{
    padding:70px 20px;
    text-align:center;
    border:1px solid #eee;
    background:#faf9f6;
    margin-top:30px;
}
.no-products h3{
    margin-bottom:8px;
}

/* DETAIL / ABOUT / SERVICE PAGES */
.detail-hero{
    padding:95px 0 75px;
    background:#f8f7f4;
}
.detail-hero-inner{
    max-width:900px;
}
.detail-hero h1{
    font-size:clamp(40px,5.5vw,72px);
    line-height:1.12;
    margin:15px 0 25px;
    letter-spacing:-1.5px;
}
.detail-hero-inner > p:last-child{
    color:#6f6f6f;
    line-height:1.9;
    max-width:780px;
}
.detail-section{
    padding:90px 0;
}
.about-story-grid,
.service-detail-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:65px;
    align-items:center;
}
.detail-main-image{
    display:block;
    width:100%;
    max-height:620px;
    object-fit:cover;
    border-radius:24px;
}
.detail-copy h2{
    font-size:clamp(30px,4vw,48px);
    line-height:1.2;
    margin:15px 0 25px;
}
.detail-copy p{
    color:#6c6c6c;
    line-height:1.9;
    margin-bottom:18px;
}
.detail-copy .btn{
    margin-top:10px;
}
.about-values{
    background:#f8f7f4;
}
.detail-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.detail-benefits > div{
    background:#fff;
    padding:35px;
    border:1px solid #eee;
    border-radius:20px;
}
.detail-benefits span{
    color:#a17a42;
    font-size:13px;
    letter-spacing:2px;
}
.detail-benefits h3{
    margin:14px 0 10px;
    font-size:23px;
}
.detail-benefits p{
    color:#777;
    line-height:1.8;
}
.project-reference{
    padding:100px 0;
    background:#fff;
}
.project-reference .section-heading{
    max-width:800px;
}
.reference-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}
.reference-card{
    overflow:hidden;
    background:#fff;
    border:1px solid #eee;
    border-radius:20px;
}
.reference-card img{
    width:100%;
    height:250px;
    object-fit:cover;
    display:block;
}
.reference-card > div{
    padding:22px;
}
.reference-card span{
    color:#a17a42;
    font-size:11px;
    letter-spacing:1.8px;
}
.reference-card h3{
    font-size:22px;
    margin:8px 0 12px;
}
.reference-card p{
    color:#707070;
    line-height:1.8;
    font-size:14px;
}
.service-process{
    background:#f8f7f4;
}
.service-extra{
    max-width:1100px;
}
.service-extra-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.service-extra-grid > div{
    padding:30px;
    border:1px solid #eee;
    border-radius:18px;
    background:#fff;
}
.service-extra-grid h3{
    margin-bottom:10px;
}
.service-extra-grid p{
    color:#777;
    line-height:1.8;
}

/* TABLET: iPad landscape / medium screens */
@media (max-width:1100px){
    .material-container{
        width:92%;
    }
    .material-feature{
        gap:32px;
    }
    .material-gallery{
        min-height:430px;
    }
    .about-story-grid,
    .service-detail-grid{
        gap:38px;
    }
    .reference-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* TABLET PORTRAIT / iPad portrait */
@media (max-width:820px){
    .hero{
        height:560px;
    }
    .hero-content{
        width:86%;
    }
    .hero h1{
        font-size:42px;
        line-height:1.2;
    }
    .hero-buttons .btn{
        min-width:145px;
        padding:12px 18px;
    }
    .intro-image img,
    .about-detail-image img{
        width:100%;
        height:auto;
    }
    .material-showcase{
        padding:75px 0;
    }
    .material-sticky-nav{
        top:82px;
    }
    .material-heading{
        margin-bottom:24px;
    }
    .material-feature{
        grid-template-columns:1fr;
        gap:28px;
    }
    .material-gallery{
        grid-template-columns:1.2fr .8fr;
        min-height:390px;
        height:390px;
    }
    .material-copy{
        padding:0;
    }
    .material-copy h3{
        font-size:42px;
    }
    .product-catalog{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .product-card img{
        height:290px;
    }
    .product-detail-page{
        padding:65px 0;
    }
    .product-detail-grid{
        grid-template-columns:1fr;
        gap:34px;
    }
    .main-product-image img{
        height:470px;
    }
    .about-story-grid,
    .service-detail-grid{
        grid-template-columns:1fr;
    }
    .detail-main-image{
        max-height:500px;
    }
    .detail-benefits,
    .service-extra-grid{
        grid-template-columns:1fr 1fr;
    }
    .service-grid{
        grid-template-columns:1fr;
    }
    .service-card{
        min-height:360px;
    }
}

/* MOBILE */
@media (max-width:600px){
    .container{
        width:92%;
    }
    .header{
        height:74px;
    }
    nav{
        top:74px;
    }
    .logo img{
        width:150px;
    }
    .header-actions{
        gap:6px;
    }
    .hero{
        height:520px;
    }
    .hero-content{
        width:88%;
        top:54%;
    }
    .hero h1{
        font-size:31px;
        line-height:1.25;
    }
    .hero-buttons{
        gap:8px;
    }
    .hero-buttons .btn{
        min-width:0;
        flex:1 1 calc(50% - 8px);
        padding:11px 10px;
        font-size:12px;
    }
    .hero-buttons .hero-sample-btn{
        flex-basis:100%;
    }
    .slider-btn{
        width:38px;
        height:38px;
    }
    .section-heading h1,
    .section-heading h2{
        font-size:32px;
    }

    .material-showcase{
        padding:58px 0;
    }
    .material-heading h2{
        font-size:34px;
    }
    .material-heading-copy{
        font-size:13px;
    }
    .material-sticky-nav{
        top:74px;
    }
    .material-category-tabs{
        padding-bottom:14px;
    }
    .material-category-btn{
        padding:9px 14px;
        font-size:12px;
    }
    .material-gallery{
        grid-template-columns:1.15fr .85fr;
        min-height:300px;
        height:300px;
        gap:8px;
    }
    .material-gallery>img,
    .material-gallery-small img{
        border-radius:13px;
    }
    .material-copy h3{
        font-size:34px;
    }
    .material-copy p{
        font-size:13px;
    }
    .material-tags{
        gap:6px;
    }
    .material-tags span{
        padding:6px 10px;
        font-size:11px;
    }

    .product-toolbar{
        grid-template-columns:1fr !important;
    }
    .product-catalog{
        grid-template-columns:1fr 1fr;
        gap:16px;
    }
    .product-card-image-wrap{
        border-radius:13px;
    }
    .product-card img{
        height:200px;
        border-radius:13px;
    }
    .product-card-content{
        padding:14px 1px 4px;
    }
    .product-card-content h3{
        font-size:15px;
        line-height:1.4;
    }
    .product-card-content p{
        font-size:11px;
        line-height:1.6;
    }
    .product-subcategory{
        font-size:10px;
    }
    .product-bottom{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }
    .product-bottom strong{
        font-size:12px;
        margin:0;
    }
    .product-inquiry-btn,
    .product-add-btn-small{
        width:100%;
    }

    .product-detail-page{
        padding:45px 0;
    }
    .main-product-image{
        border-radius:14px;
    }
    .main-product-image img{
        height:330px;
    }
    .product-thumbnails{
        gap:8px;
        margin-top:10px;
    }
    .product-thumbnails img{
        width:70px;
        height:70px;
        border-radius:9px;
    }
    .product-detail-info h1{
        font-size:30px;
        line-height:1.2;
        margin:10px 0 18px;
    }
    .product-detail-description{
        font-size:14px;
        line-height:1.8;
        margin-bottom:22px;
    }
    .product-detail-price{
        font-size:25px;
        margin-bottom:22px;
    }
    .product-detail-actions{
        display:flex;
        flex-direction:column;
        gap:9px;
    }
    .product-detail-actions .btn{
        margin:0;
        width:100%;
        text-align:center;
    }

    .detail-hero{
        padding:65px 0 50px;
    }
    .detail-hero h1{
        font-size:38px;
    }
    .detail-section,
    .project-reference{
        padding:60px 0;
    }
    .detail-benefits,
    .service-extra-grid,
    .reference-grid{
        grid-template-columns:1fr;
    }
    .detail-main-image{
        max-height:380px;
        border-radius:18px;
    }
    .reference-card img{
        height:220px;
    }
    .service-card{
        min-height:340px;
    }
    .service-content{
        left:22px;
        right:20px;
        bottom:22px;
    }
    .service-content h3{
        font-size:28px;
    }
    .service-content p{
        font-size:13px;
    }
    .detail-benefits > div,
    .service-extra-grid > div{
        padding:25px;
    }
}

/* very small phones */
@media (max-width:390px){
    .product-catalog{
        grid-template-columns:1fr;
    }
    .product-card img{
        height:260px;
    }
    .hero-buttons .hero-sample-btn{
        flex-basis:100%;
    }
}

.product-detail-subcategory{margin-top:6px;color:#999;font-size:12px;letter-spacing:.4px;}

/* ==========================================
   LANGUAGE SWITCH + RESPONSIVE HEADER
========================================== */
.language-switch{
    display:inline-flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
    margin-left:8px;
    border:1px solid #ddd;
    border-radius:8px;
    padding:3px 7px;
    background:#fff;
    font-size:12px;
    line-height:1;
}
.language-switch .lang-btn{
    border:0;
    background:transparent;
    padding:5px 3px;
    font-family:inherit;
    font-size:12px;
    cursor:pointer;
    color:#777;
}
.language-switch .lang-btn.active{
    color:#a17a42;
    font-weight:700;
}
.language-switch > span{color:#bbb;}

.material-category-tabs{
    overflow-x:auto;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-wrap:nowrap;
}
.material-category-btn{flex:0 0 auto;}

@media (max-width:1100px){
    .nav{gap:10px;}
    nav{gap:18px;margin-right:12px;}
    nav a{font-size:14px;}
    .logo img{width:175px;}
    .language-switch{margin-left:3px;}
}
@media (max-width:820px){
    .nav{width:94%; gap:7px;}
    .logo img{width:165px;}
    .header-actions{gap:5px;}
    .language-switch{font-size:11px;padding:3px 5px;}
    .language-switch .lang-btn{font-size:11px;padding:5px 2px;}
    .cart-btn{padding:7px 9px;font-size:13px;}
    .material-feature{
        grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
        align-items:center;
        gap:22px;
    }
    .material-gallery{min-height:330px;height:330px;}
    .material-copy h3{font-size:34px;}
}
@media (max-width:600px){
    .nav{width:94%;gap:5px;}
    .logo img{width:132px;}
    .header-actions{gap:4px;}
    .language-switch{margin-left:0;padding:3px 4px;}
    .cart-btn{padding:6px 7px;font-size:12px;}
    .mobile-menu{font-size:23px;padding:0 2px;}
    .material-feature{
        grid-template-columns:1fr;
        gap:20px;
    }
    .material-gallery{min-height:300px;height:300px;}
}

/* BMC updates: language after cart + product inquiry */
.header-actions{display:flex;align-items:center;gap:25px;}
.language-switch{order:3;margin-left:0;}
.cart-btn{order:2;}
.mobile-menu{order:4;}
.product-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.product-add-btn-small,.product-inquiry-btn{border:1px solid #202020;border-radius:8px;padding:8px 12px;font:inherit;cursor:pointer;white-space:nowrap;}
.product-add-btn-small{background:#202020;color:#fff;}
.product-inquiry-btn{background:#fff;color:#202020;}
.product-inquiry-btn:hover{background:#f2f0eb;}
.inquiry-modal{position:fixed;inset:0;z-index:9999;display:none;}
.inquiry-modal.show{display:block;}
.inquiry-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
.inquiry-modal-box{position:relative;width:min(92%,460px);margin:18vh auto 0;background:#fff;border-radius:18px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.2);z-index:1;}
.inquiry-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;cursor:pointer;}
.inquiry-links{display:grid;gap:10px;margin-top:22px;}
.inquiry-links a{display:block;text-decoration:none;border:1px solid #ddd;padding:13px 16px;border-radius:10px;color:#202020;background:#faf9f6;}
.inquiry-links a:hover{border-color:#a17a42;}
@media(max-width:820px){.header-actions{gap:6px}.language-switch{font-size:11px}.product-actions{gap:5px}.product-add-btn-small,.product-inquiry-btn{padding:7px 9px;font-size:12px}.inquiry-modal-box{padding:26px;margin-top:22vh}}
@media(max-width:600px){.header-actions{gap:4px}.language-switch{padding:3px 4px}.language-switch .lang-btn{padding:5px 2px}.cart-btn{padding:6px 7px}.product-actions{width:100%}.product-add-btn-small,.product-inquiry-btn{flex:1}.inquiry-modal-box{width:88%;}}
.product-category-pills{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-behavior:smooth;white-space:nowrap;}
.product-pill{flex:0 0 auto;}

/* Final responsive navigation refinements */
.language-switch{order:3!important;margin-left:0!important;display:inline-flex!important;align-items:center!important;white-space:nowrap!important;line-height:1!important;vertical-align:middle!important;}
.language-switch > span{display:inline-block!important;margin:0!important;padding:0!important;line-height:1!important;}
.product-category-pills{cursor:grab;user-select:none;touch-action:pan-x;overscroll-behavior-x:contain;}
.product-category-pills.is-dragging{cursor:grabbing;scroll-behavior:auto;}
.product-pill{touch-action:pan-x;}
@media (max-width:820px){.language-switch{margin-left:0!important}.product-category-pills{padding-bottom:18px;}}

/* Horizontal category navigation: mouse drag on desktop + touch swipe on iPad/mobile */
.product-category-pills,
.material-category-tabs{
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scrollbar-width:none;
    user-select:none;
}
.product-category-pills::-webkit-scrollbar,
.material-category-tabs::-webkit-scrollbar{display:none}
.product-category-pills.is-dragging{cursor:grabbing!important}


/* Product page category navigation: explicit left/right arrows (no mouse-drag scrolling) */
.product-category-nav{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    margin:0 0 18px;
}
.product-category-nav .product-category-pills{
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    display:flex;
    flex-wrap:nowrap;
    gap:9px;
    padding:4px 2px 18px;
    margin:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    cursor:default!important;
    user-select:auto;
    touch-action:pan-x;
}
.product-category-nav .product-category-pills::-webkit-scrollbar{display:none}
.product-category-nav .product-pill{flex:0 0 auto;touch-action:auto;}
.product-category-arrow{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border:1px solid #ddd9d0;
    border-radius:50%;
    background:#faf9f6;
    color:#202020;
    font:inherit;
    font-size:24px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .2s ease;
}
.product-category-arrow:hover:not(:disabled){
    background:#202020;
    color:#fff;
    border-color:#202020;
}
.product-category-arrow:disabled{
    opacity:.3;
    cursor:not-allowed;
}
.product-category-arrow.is-hidden{display:none;}
/* Disable the previous mouse-drag behavior only for product category pills. */
.product-category-nav .product-category-pills{
    overscroll-behavior-x:contain;
}
@media(max-width:600px){
    .product-category-nav{gap:6px;}
    .product-category-arrow{flex-basis:36px;width:36px;height:36px;font-size:21px;}
    .product-category-nav .product-category-pills{gap:7px;padding-bottom:14px;}
}


/* =========================================================
   PRODUCT CATEGORY NAVIGATION — DEVICE BEHAVIOR
   Desktop: use ← / → only. iPad/mobile: keep finger swipe.
========================================================= */
@media (min-width:1025px){
    .product-category-nav .product-category-pills{
        cursor:default !important;
        user-select:auto;
        touch-action:auto;
    }
    .product-category-nav .product-category-arrow{
        display:flex;
    }
}

@media (max-width:1024px){
    .product-category-nav .product-category-arrow{
        display:none !important;
    }
    .product-category-nav .product-category-pills{
        width:100%;
        cursor:grab !important;
        user-select:none;
        touch-action:pan-x;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
    }
    .product-category-nav .product-category-pills.is-dragging{
        cursor:grabbing !important;
    }
}

/* =========================================================
   OUR WOOD FLOORING — iPad / mobile image scale
   Keep all 3 images in each wood panel consistent with
   the Solid Wood image scale, spacing and rounded corners.
   Other content in this section is intentionally unchanged.
========================================================= */
#wood-floor .material-gallery{
    grid-template-columns:1.55fr .75fr;
    gap:12px;
    min-height:520px;
    height:520px;
}
#wood-floor .material-gallery-small{
    grid-template-rows:1fr 1fr;
    gap:12px;
}
#wood-floor .material-gallery>img,
#wood-floor .material-gallery-small img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:20px;
}

@media (max-width:700px){
    #wood-floor .material-gallery{
        grid-template-columns:1.35fr .75fr;
        gap:10px;
        min-height:200px;
        height:200px;
    }
    #wood-floor .material-gallery-small{
        gap:10px;
    }
}

@media (max-width:410px){
    #wood-floor .material-gallery{
        grid-template-columns:1.2fr .8fr;
        gap:8px;
        min-height:150px;
        height:150px;
    }
    #wood-floor .material-gallery-small{
        gap:8px;
    }
    #wood-floor .material-gallery>img,
    #wood-floor .material-gallery-small img{
        border-radius:15px;
    }
}

@media (max-width:600px){
    #wood-floor .material-gallery{
        grid-template-columns:1.15fr .85fr;
        gap:8px;
        min-height:150px;
        height:150px;
    }
    #wood-floor .material-gallery-small{
        gap:8px;
    }
    #wood-floor .material-gallery>img,
    #wood-floor .material-gallery-small img{
        border-radius:13px;
    }
}


/* =========================================================
   BMC HOMEMART — USER REQUEST UPDATE 2026-09
   RESPONSIVE + EASY-TO-EDIT NOTES
========================================================= */

/* NOTE: ปรับระยะห่าง TH | EN จากตะกร้าสินค้าที่ .header-actions
   - margin-left ของ .language-switch = ระยะห่างจากตะกร้า
   - font-size ของ .lang-btn = ขนาดตัวอักษร TH/EN
   - ไม่มีกล่อง/กรอบตามที่กำหนด */
.header-actions{
    gap:18px;
}
.language-switch{
    margin-left:10px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    font-size:15px !important;
    font-weight:700 !important;
    flex:0 0 auto;
}
.language-switch .lang-btn{
    padding:4px 2px !important;
    font-size:15px !important;
    font-weight:700 !important;
    color:#202020;
}
.language-switch > span{
    margin:0 3px !important;
    color:#999;
}

/* NOTE: ป้องกัน Header ล้นจอ โดยเฉพาะ iPad/Mobile */
.nav,
.header-actions,
.search-btn,
.cart-btn,
.mobile-menu{
    min-width:0;
}
.header-actions{
    flex-shrink:0;
}

/* NOTE: รูปภาพ 3 รูปของไม้เอ็นจิเนียร์ให้ใช้สัดส่วน/spacing
   เท่ากับไม้ Solid และไม่ให้รูปภาพล้นออกนอก section */
#wood-floor .material-feature{
    min-width:0;
}
#wood-floor .material-gallery,
#engineered-panel .material-gallery{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
}
#wood-floor .material-gallery-small{
    min-width:0;
    overflow:hidden;
}
#wood-floor .material-gallery > img,
#wood-floor .material-gallery-small img{
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

/* NOTE: คุมขนาด/spacing ของ Section พื้นไม้บน Tablet */
@media (min-width:701px) and (max-width:1024px){
    #wood-floor .material-gallery{
        height:330px;
        min-height:330px;
        grid-template-columns:1.55fr .75fr;
        gap:12px;
    }
    #wood-floor .material-gallery-small{
        grid-template-rows:1fr 1fr;
        gap:12px;
    }
}

/* NOTE: คุมขนาด/spacing ของ Section พื้นไม้บน Mobile */
@media (max-width:700px){
    .header-actions{
        gap:9px;
    }
    .language-switch{
        margin-left:7px !important;
        font-size:14px !important;
    }
    .language-switch .lang-btn{
        font-size:14px !important;
        padding:4px 1px !important;
    }
    #wood-floor .material-gallery,
    #engineered-panel .material-gallery{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }
}
@media (max-width:410px){
    .header-actions{
        gap:7px;
    }
    .language-switch{
        margin-left:5px !important;
    }
}

/* NOTE: ป้องกันทุก Material Gallery ล้นบน iPad/Mobile
   โดยไม่เปลี่ยนโครงสร้าง Desktop */
@media (max-width:1024px){
    .material-feature{
        min-width:0;
    }
    .material-gallery,
    .material-gallery-small{
        min-width:0;
        max-width:100%;
    }
    .material-gallery img{
        max-width:100%;
    }
}


/* =========================================================
   BMC HOMEMART — FINAL STRUCTURE / RESPONSIVE PATCH
   NOTE: ส่วนนี้เป็นกฎแก้ไขท้ายไฟล์เพื่อให้ลำดับการทำงานชัดเจน
   และลดการชนกันของกฎ CSS เดิม โดยไม่เปลี่ยน Layout หลัก Desktop
========================================================= */

/* NOTE: สารบัญ CSS หลัก
   01 Header / Navigation
   02 Hero / Slider
   03 Material Sections / Tabs / Gallery
   04 Services / Projects / Contact / Footer
   05 Product Catalog / Product Detail / Cart
   06 Responsive Desktop / Tablet / Mobile
   07 LINE OA / Social Links / Language
*/

/* NOTE: ทุก Material Section ต้องตัดขอบของภาพให้อยู่ภายใน Section
   และให้ sticky navigation หยุดทำงานเมื่อพ้นขอบ Section */
.material-showcase{
    position:relative;
    min-width:0;
    overflow:clip;
    scroll-margin-top:82px;
}
.material-container,
.material-panel,
.material-category-panel,
.material-feature,
.material-copy,
.material-gallery,
.material-gallery-small{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}

/* NOTE: Section "สินค้าอื่นๆ" ใช้โครงสร้างและการแสดงผลเหมือน "หินธรรมชาติ"
   แก้ปัญหา class ซ้ำใน HTML ซึ่งทำให้ .other-products-section ไม่ถูกใช้งาน */
#other-products.other-products-section{
    position:relative;
    overflow:clip;
}
#other-products .material-panel.active{
    display:block;
}
#other-products .material-category-panel.active{
    display:block;
    visibility:visible;
    opacity:1;
    height:auto;
    overflow:visible;
}
#other-products .material-feature{
    width:100%;
    min-width:0;
}
#other-products .material-gallery{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
}

/* NOTE: ซ่อนแท็กเฉพาะ 4 Section ที่ผู้ใช้ระบุ
   ไม่ลบข้อมูล HTML เพื่อคงข้อมูลเดิมไว้ครบ */
#natural-stone .material-tags,
#synthetic-stone .material-tags,
#wood-floor .material-tags,
#other-products .material-tags{
    display:none !important;
}

/* NOTE: Pool Stone ใช้สัดส่วน/spacing เดียวกับ Marble และถูกบังคับ
   ให้อยู่ในกรอบ Gallery ไม่ล้นออกนอก Section */
#natural-stone #pool-panel .material-gallery,
#natural-stone #marble-panel .material-gallery{
    grid-template-columns:1.55fr .75fr;
    gap:12px;
    min-height:520px;
    height:520px;
    width:100%;
    max-width:100%;
    overflow:hidden;
}
#natural-stone #pool-panel .material-gallery-small,
#natural-stone #marble-panel .material-gallery-small{
    grid-template-rows:1fr 1fr;
    gap:12px;
    min-width:0;
    overflow:hidden;
}
#natural-stone #pool-panel .material-gallery>img,
#natural-stone #pool-panel .material-gallery-small img,
#natural-stone #marble-panel .material-gallery>img,
#natural-stone #marble-panel .material-gallery-small img{
    width:100%;
    height:100%;
    max-width:100%;
    min-width:0;
    object-fit:cover;
    display:block;
    box-sizing:border-box;
    border-radius:20px;
}

/* NOTE: Hero ปุ่มใช้ data-th/data-en เพื่อให้เปลี่ยนภาษาพร้อมกัน */
.hero-buttons .btn{
    min-width:0;
    max-width:100%;
}

/* NOTE: LINE OA / Instagram / TikTok เป็นลิงก์ภายนอก
   เปิดหน้าใหม่ตามข้อกำหนด และไม่ให้ลิงก์ทำให้ Layout ล้น */
.footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}
.footer-social img{
    max-width:100%;
}

/* NOTE: Tablet — ยึดโครงสร้าง Desktop แต่ลดขนาดภาพ/ข้อความ/spacing */
@media (min-width:701px) and (max-width:1024px){
    .material-showcase{
        overflow:clip;
    }
    .material-feature{
        grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
        gap:22px;
    }
    .material-gallery,
    #natural-stone #pool-panel .material-gallery,
    #natural-stone #marble-panel .material-gallery{
        width:100%;
        max-width:100%;
        height:330px;
        min-height:330px;
        gap:12px;
    }
    #natural-stone #pool-panel .material-gallery-small,
    #natural-stone #marble-panel .material-gallery-small{
        gap:12px;
    }
    #natural-stone #pool-panel .material-gallery>img,
    #natural-stone #pool-panel .material-gallery-small img,
    #natural-stone #marble-panel .material-gallery>img,
    #natural-stone #marble-panel .material-gallery-small img{
        border-radius:20px;
    }
}

/* NOTE: Mobile — เปลี่ยนเฉพาะขนาด/spacing ไม่เปลี่ยนลำดับองค์ประกอบหลัก */
@media (max-width:700px){
    .material-showcase{
        width:100%;
        max-width:100%;
        overflow:clip;
    }
    .material-container{
        width:100%;
        max-width:100%;
    }
    .material-gallery,
    #natural-stone #pool-panel .material-gallery,
    #natural-stone #marble-panel .material-gallery{
        width:100%;
        max-width:100%;
        grid-template-columns:1.15fr .85fr;
        gap:8px;
        height:150px;
        min-height:150px;
        overflow:hidden;
    }
    #natural-stone #pool-panel .material-gallery-small,
    #natural-stone #marble-panel .material-gallery-small{
        gap:8px;
        min-width:0;
        overflow:hidden;
    }
    #natural-stone #pool-panel .material-gallery>img,
    #natural-stone #pool-panel .material-gallery-small img,
    #natural-stone #marble-panel .material-gallery>img,
    #natural-stone #marble-panel .material-gallery-small img{
        border-radius:13px;
    }
    .material-copy{
        width:100%;
        max-width:100%;
        overflow-wrap:anywhere;
    }
    .hero-buttons{
        max-width:100%;
    }
}

@media (max-width:410px){
    .material-gallery,
    #natural-stone #pool-panel .material-gallery,
    #natural-stone #marble-panel .material-gallery{
        grid-template-columns:1.2fr .8fr;
        gap:8px;
        height:150px;
        min-height:150px;
    }
}


/* =========================================================
   NOTE: PATCH 2026-09-13 — MATERIAL SECTION CONSISTENCY
   เป้าหมาย:
   1) สินค้าอื่นๆ ต้องแสดงรูปหมวดแรกทันทีเมื่อเลื่อนถึง Section
      โดยไม่ต้องคลิกปุ่มก่อน
   2) ปุ่มหมวดสินค้าอื่นๆ ต้องสลับภาพ/เนื้อหาแบบเดียวกับพื้นไม้
   3) ขอบซ้าย-ขวาของ 4 Material Sections ต้องอยู่แนวเดียวกัน
      บน Desktop / Tablet / Mobile โดยไม่ทำให้ภาพล้นจอ
========================================================= */

/* NOTE: กรอบกลางของ 4 Section ใช้ขนาด/ขอบเดียวกัน */
#natural-stone > .material-container,
#synthetic-stone > .material-container,
#wood-floor > .material-container,
#other-products > .material-container{
    width:90%;
    max-width:1250px;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

/* NOTE: สินค้าอื่นๆ — panel แรก (กระเบื้อง) ต้องแสดงทันทีตั้งแต่เริ่มโหลด */
#other-products #ceramic-panel.active{
    display:block !important;
    visibility:visible;
    opacity:1;
    height:auto;
}

/* NOTE: กันกรณี JS/Browser state เดิมทำให้ panel แรกไม่มี active
   ปุ่มแรกเป็นค่าเริ่มต้นและ panel แรกต้องจับคู่กันเสมอ */
#other-products .material-category-btn:first-child{
    cursor:pointer;
}

/* NOTE: รูปแบบการสลับหมวดใช้ระบบเดียวกับ Wood Floor */
#other-products .material-category-panel{
    display:none;
}
#other-products .material-category-panel.active{
    display:block;
}

/* NOTE: ไม่ให้เนื้อหา/รูปภาพดันกรอบ Section ออกด้านข้าง */
#natural-stone,
#synthetic-stone,
#wood-floor,
#other-products{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    box-sizing:border-box;
}

#natural-stone .material-container,
#synthetic-stone .material-container,
#wood-floor .material-container,
#other-products .material-container,
#natural-stone .material-feature,
#synthetic-stone .material-feature,
#wood-floor .material-feature,
#other-products .material-feature{
    min-width:0;
}

/* NOTE: Tablet — ขอบซ้าย/ขวาเท่ากันทั้ง 4 Section */
@media (min-width:701px) and (max-width:1100px){
    #natural-stone > .material-container,
    #synthetic-stone > .material-container,
    #wood-floor > .material-container,
    #other-products > .material-container{
        width:92%;
        max-width:none;
    }
}

/* NOTE: Mobile — ใช้ขอบเท่ากันทุก Section และป้องกันภาพล้น */
@media (max-width:700px){
    #natural-stone > .material-container,
    #synthetic-stone > .material-container,
    #wood-floor > .material-container,
    #other-products > .material-container{
        width:calc(100% - 28px);
        max-width:none;
    }
}

/* =========================================================
   BMC HOMEMART — FINAL PATCH 2026-09-13
   RESPONSIVE: OUR SERVICES / OUR PROJECTS / FOOTER
   NOTE: Desktop layout เดิมไม่เปลี่ยน
   NOTE: iPad และ Mobile บังคับ 3 รูปให้อยู่แถวเดียวกัน
   NOTE: Footer 4 กลุ่มให้อยู่แถวเดียวกันตามคำขอ
   NOTE: ปรับเฉพาะขนาดภาพ ตัวอักษร และ spacing เพื่อป้องกันล้นจอ
========================================================= */

/* NOTE: ป้องกันทุกกล่องหลักไม่ให้มีความกว้างขั้นต่ำที่ดัน viewport */
.service-grid,
.project-grid,
.footer-grid,
.service-card,
.project,
.footer-grid > div{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}

/* NOTE: iPad Landscape / iPad Portrait
   OUR SERVICES = 3 รูปในแถวเดียว
   OUR PROJECTS = 3 รูปในแถวเดียว
   Footer = BMC / MENU / PRODUCTS / บริษัท อยู่ 4 ช่องในแถวเดียว */
@media (min-width:601px) and (max-width:1024px){
    .service-grid,
    .project-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:10px;
    }

    .service-card{
        min-height:300px;
        height:300px;
    }

    .service-content{
        left:16px;
        right:14px;
        bottom:20px;
    }

    .service-content h3{
        font-size:20px;
        line-height:1.25;
        margin:7px 0;
    }

    .service-content p{
        font-size:12px;
        line-height:1.55;
        margin-bottom:8px;
    }

    .service-content > span,
    .service-content b{
        font-size:11px;
    }

    .project{
        height:330px;
        border-radius:28px;
    }

    .project img{
        border-radius:28px;
    }

    .project div{
        left:16px;
        right:12px;
        bottom:18px;
    }

    .project span{
        font-size:9px;
        letter-spacing:1.2px;
    }

    .project h3{
        font-size:18px;
        line-height:1.25;
    }

    /* NOTE: Footer 4 columns บน iPad ทั้งแนวนอนและแนวตั้ง */
    footer .footer-grid{
        grid-template-columns:minmax(0,.95fr) minmax(0,.72fr) minmax(0,.78fr) minmax(0,1.35fr) !important;
        gap:12px;
        align-items:start;
    }

    footer .footer-logo{
        font-size:18px;
        line-height:1.2;
        margin-bottom:8px;
    }

    footer p,
    footer a{
        font-size:11px;
        line-height:1.5;
        margin:5px 0;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    footer h4{
        font-size:13px;
        line-height:1.35;
        margin-bottom:8px;
        overflow-wrap:anywhere;
    }

    footer .footer-social{
        gap:5px;
        margin-top:10px;
        flex-wrap:wrap;
    }

    footer .footer-social a{
        width:28px;
        height:28px;
        margin:0;
    }

    footer .footer-social img{
        width:17px;
        height:17px;
    }
}

/* NOTE: Mobile Portrait / Mobile Landscape
   ยังคง 3 รูปในแถวเดียวกัน และ Footer 4 กลุ่มในแถวเดียวกัน
   ไม่เปลี่ยนลำดับ HTML เดิม */
@media (max-width:600px){
    .services .container,
    .projects .container,
    footer .container{
        width:calc(100% - 20px);
        max-width:none;
    }

    /* OUR SERVICES — 3 รูปแถวเดียว */
    .services .service-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px;
        width:100%;
    }

    .services .service-card{
        width:100%;
        min-width:0;
        min-height:220px;
        height:220px;
        border-radius:14px;
    }

    .services .service-card img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .services .service-content{
        left:8px;
        right:7px;
        bottom:10px;
    }

    .services .service-content > span{
        font-size:8px;
        letter-spacing:1px;
    }

    .services .service-content h3{
        font-size:13px;
        line-height:1.2;
        margin:4px 0;
        letter-spacing:0;
    }

    .services .service-content p{
        font-size:8px;
        line-height:1.4;
        margin:0 0 4px;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .services .service-content b{
        font-size:8px;
        line-height:1.2;
        white-space:nowrap;
    }

    /* OUR PROJECTS — 3 รูปแถวเดียว */
    .projects .project-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px;
        width:100%;
    }

    .projects .project{
        width:100%;
        min-width:0;
        height:230px;
        border-radius:14px;
    }

    .projects .project img{
        width:100%;
        height:100%;
        border-radius:14px;
        object-fit:cover;
    }

    .projects .project div{
        left:8px;
        right:6px;
        bottom:9px;
    }

    .projects .project span{
        font-size:7px;
        letter-spacing:.8px;
    }

    .projects .project h3{
        font-size:11px;
        line-height:1.2;
        overflow-wrap:anywhere;
    }

    /* NOTE: Footer — 4 กลุ่มอยู่แถวเดียวทั้งแนวตั้ง/แนวนอน */
    footer .footer-grid{
        grid-template-columns:minmax(0,.9fr) minmax(0,.65fr) minmax(0,.7fr) minmax(0,1.35fr) !important;
        gap:5px;
        width:100%;
        align-items:start;
    }

    footer .footer-grid > div{
        min-width:0;
        overflow:hidden;
    }

    footer .footer-logo{
        font-size:12px;
        line-height:1.15;
        margin-bottom:6px;
        overflow-wrap:anywhere;
    }

    footer p,
    footer a{
        font-size:8px;
        line-height:1.35;
        margin:3px 0;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    footer h4{
        font-size:9px;
        line-height:1.25;
        margin-bottom:5px;
        overflow-wrap:anywhere;
    }

    footer .footer-social{
        display:flex;
        gap:3px;
        margin-top:6px;
        flex-wrap:wrap;
    }

    footer .footer-social a{
        width:20px;
        height:20px;
        margin:0;
        flex:0 0 20px;
    }

    footer .footer-social img{
        width:12px;
        height:12px;
    }

    /* NOTE: Copyright ยังคงจัดแยกบรรทัด ไม่ให้ดัน 4-column Footer */
    footer .copyright{
        margin-top:28px;
        padding-top:12px;
        font-size:8px;
        gap:6px;
    }

    footer .footer-policy-links{
        font-size:8px;
        gap:5px;
    }
}

/* NOTE: จอมือถือแคบมาก — ลดเฉพาะขนาดภาพ/ข้อความอีกเล็กน้อย
   เพื่อไม่ให้ 3 รูปและ Footer 4 ช่องล้นจอ */
@media (max-width:390px){
    .services .service-card{
        height:195px;
        min-height:195px;
    }

    .services .service-content{
        left:6px;
        right:5px;
        bottom:8px;
    }

    .services .service-content h3{
        font-size:11px;
    }

    .services .service-content p{
        font-size:7px;
        -webkit-line-clamp:2;
    }

    .services .service-content b{
        font-size:7px;
    }

    .projects .project{
        height:205px;
    }

    .projects .project div{
        left:6px;
        right:4px;
        bottom:7px;
    }

    .projects .project h3{
        font-size:9px;
    }

    footer .footer-grid{
        gap:3px;
    }

    footer .footer-logo{
        font-size:10px;
    }

    footer p,
    footer a{
        font-size:7px;
    }

    footer h4{
        font-size:8px;
    }
}

/* =========================================================
   BMC HOMEMART — RESPONSIVE MASTER PATCH 2026-09-13
   เป้าหมาย: iPad + Mobile ให้โครงสร้างใกล้ Desktop ทุกหน้า
   โดยคง Desktop (มากกว่า 1024px) เดิมไว้
   - ป้องกันเนื้อหา/รูป/ปุ่มล้นจอทั้งแนวนอนและแนวตั้ง
   - รักษา 3 คอลัมน์ Services / Projects
   - รักษา Footer 4 คอลัมน์
   - ลดขนาดตัวอักษรและภาพตามพื้นที่จริง
========================================================= */

html, body{
    max-width:100%;
    overflow-x:hidden;
}

img, video, iframe, svg{
    max-width:100%;
}

button, input, select, textarea{
    max-width:100%;
    box-sizing:border-box;
}

/* ---------- iPad / Tablet: 601–1024px ---------- */
@media (min-width:601px) and (max-width:1024px){
    .container{
        width:92%;
        max-width:1250px;
    }

    .header{height:76px;}
    nav{top:76px;}
    .logo img{width:175px;}
    nav a{font-size:14px;}

    .hero{
        height:540px;
        
    }
    .hero-content{width:86%;}
    .hero h1{font-size:42px;line-height:1.2;}
    .hero-description{font-size:14px;line-height:1.6;}
    .hero-buttons{gap:9px;}
    .hero-buttons .btn{font-size:12px;padding:11px 16px;min-width:0;}

    .section-heading h1,
    .section-heading h2{font-size:38px;line-height:1.2;}

    /* Intro / About — desktop-like 2 columns */
    .intro-grid,
    .about-detail-grid,
    .about-story-grid,
    .contact-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:28px;
    }
    .intro-image img,
    .about-detail-image img{width:100%;height:360px;object-fit:cover;}

    /* Services / Projects — 3 columns like Desktop */
    .services .service-grid,
    .projects .project-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:10px;
    }
    .service-card{height:300px;min-height:300px;border-radius:22px;}
    .service-card img{width:100%;height:100%;object-fit:cover;}
    .service-content{left:15px;right:12px;bottom:18px;}
    .service-content h3{font-size:19px;line-height:1.25;margin:6px 0;}
    .service-content p{font-size:11px;line-height:1.5;margin-bottom:7px;}
    .service-content b,
    .service-content > span{font-size:10px;}

    .project{height:320px;border-radius:26px;}
    .project img{border-radius:26px;}
    .project div{left:15px;right:12px;bottom:17px;}
    .project span{font-size:9px;letter-spacing:1.2px;}
    .project h3{font-size:18px;line-height:1.25;overflow-wrap:anywhere;}

    /* Exterior collection — keep desktop-like 2 columns */
    .exterior-material-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px;}
    .exterior-material-card{height:270px;}

    /* Material showcase — 2 columns, scale down only */
    .material-container{width:92%;}
    .material-feature{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important;gap:24px;}
    .material-gallery{min-width:0;height:390px;min-height:390px;}
    .material-copy{min-width:0;}
    .material-copy h3{font-size:36px;line-height:1.2;overflow-wrap:anywhere;}
    .material-copy p{font-size:13px;line-height:1.7;overflow-wrap:anywhere;}
    .material-category-tabs{max-width:100%;overflow-x:auto;}
    .material-category-btn{font-size:12px;padding:9px 13px;}

    /* Products — 2 columns */
    .products-page{padding-top:70px;}
    .product-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
    .product-catalog{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px;}
    .product-card{min-width:0;}
    .product-card img{height:280px;object-fit:cover;}
    .product-card-content h3{font-size:16px;line-height:1.35;overflow-wrap:anywhere;}
    .product-card-content p{font-size:12px;line-height:1.55;overflow-wrap:anywhere;}
    .product-bottom{gap:8px;}
    .product-bottom strong{font-size:12px;}

    /* Product detail — 2 columns like desktop */
    .product-detail-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;gap:28px;align-items:start;}
    .main-product-image img{height:430px;object-fit:cover;}
    .product-detail-info h1{font-size:34px;line-height:1.2;overflow-wrap:anywhere;}
    .product-detail-description{font-size:13px;line-height:1.8;overflow-wrap:anywhere;}
    .product-detail-price{font-size:26px;}

    /* Service detail / About detail */
    .service-detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:28px;}
    .detail-benefits,
    .service-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px;}
    .detail-main-image{width:100%;max-height:460px;object-fit:cover;}
    .detail-copy h2{font-size:30px;line-height:1.25;overflow-wrap:anywhere;}
    .detail-copy p{font-size:13px;line-height:1.75;overflow-wrap:anywhere;}

    /* Contact */
    .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}
    .contact-box{min-width:0;}
    .contact-box p,
    .contact-item p{font-size:12px;overflow-wrap:anywhere;}

    /* Cart — keep horizontal desktop-like item structure where possible */
    .cart-item{min-width:0;gap:15px;}
    .cart-item-control{min-width:180px;}

    /* Policy pages */
    .policy-wrap{width:92%;max-width:1000px;}
    .policy-wrap p,
    .policy-wrap li{font-size:13px;line-height:1.8;overflow-wrap:anywhere;}

    /* Footer — exactly 4 columns */
    footer .footer-grid{
        grid-template-columns:minmax(0,.95fr) minmax(0,.7fr) minmax(0,.8fr) minmax(0,1.35fr) !important;
        gap:12px;
    }
    footer .footer-logo{font-size:18px;line-height:1.2;}
    footer p, footer a{font-size:10px;line-height:1.5;overflow-wrap:anywhere;}
    footer h4{font-size:12px;line-height:1.35;overflow-wrap:anywhere;}
    footer .footer-social{gap:5px;flex-wrap:wrap;}
}

/* ---------- Mobile: up to 600px ---------- */
@media (max-width:600px){
    .container{width:calc(100% - 20px);max-width:none;}

    .header{height:74px;}
    nav{top:74px;}
    .logo img{width:145px;}
    .header-actions{gap:4px;min-width:0;}
    .cart-btn{font-size:11px;padding:6px 7px;}
    .language-switch{font-size:10px;}
    .mobile-menu{font-size:23px;}

    /* Hero */
    .hero{height:500px;}
    .hero-content{width:88%;}
    .hero h1{font-size:29px;line-height:1.22;overflow-wrap:anywhere;}
    .hero-description{font-size:12px;line-height:1.55;}
    .hero-buttons{gap:7px;}
    .hero-buttons .btn{font-size:10px;padding:9px 7px;min-width:0;}

    .section-heading h1,
    .section-heading h2{font-size:29px;line-height:1.2;overflow-wrap:anywhere;}

    /* Intro / About — one column only where two columns would become unreadable */
    .intro-grid,
    .about-detail-grid,
    .about-story-grid,
    .contact-grid{grid-template-columns:minmax(0,1fr) !important;gap:24px;}
    .intro-image img,
    .about-detail-image img{width:100%;height:280px;object-fit:cover;}
    .intro-content h2,
    .about-detail-content h2{font-size:29px;line-height:1.25;overflow-wrap:anywhere;}
    .intro-content p,
    .about-detail-content p{font-size:13px;line-height:1.75;overflow-wrap:anywhere;}

    /* Services / Projects — 3 cards in one row, same visual order as desktop */
    .services .service-grid,
    .projects .project-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px;
        width:100%;
    }
    .services .service-card{height:220px;min-height:220px;border-radius:14px;}
    .services .service-card img{width:100%;height:100%;object-fit:cover;}
    .services .service-content{left:7px;right:6px;bottom:9px;}
    .services .service-content > span{font-size:7px;letter-spacing:.6px;}
    .services .service-content h3{font-size:11px;line-height:1.2;margin:3px 0;overflow-wrap:anywhere;}
    .services .service-content p{
        font-size:8px;
        line-height:1.35;
        margin:0 0 3px;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .services .service-content b{font-size:7px;line-height:1.2;white-space:nowrap;}

    .projects .project{height:220px;border-radius:14px;}
    .projects .project img{width:100%;height:100%;border-radius:14px;object-fit:cover;}
    .projects .project div{left:7px;right:5px;bottom:8px;}
    .projects .project span{font-size:6px;letter-spacing:.6px;}
    .projects .project h3{font-size:10px;line-height:1.2;overflow-wrap:anywhere;}

    /* Exterior collection */
    .exterior-material-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px;}
    .exterior-material-card{height:190px;border-radius:14px;}
    .exterior-material-card .collection-info{left:10px;right:8px;bottom:10px;}
    .exterior-material-card .collection-info h3{font-size:15px;line-height:1.2;}

    /* Material sections — compact desktop-like ./image/text sequence */
    .material-showcase{padding:55px 0;overflow-x:hidden;}
    .material-container{width:calc(100% - 20px);max-width:none;}
    .material-heading{margin-bottom:18px;}
    .material-heading h2{font-size:30px;line-height:1.2;overflow-wrap:anywhere;}
    .material-heading-copy{font-size:11px;line-height:1.6;}
    .material-sticky-nav{top:74px;max-width:100%;overflow:hidden;}
    .material-category-tabs{max-width:100%;overflow-x:auto;gap:6px;padding-bottom:10px;}
    .material-category-btn{font-size:10px;padding:8px 10px;white-space:nowrap;}
    .material-feature{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important;gap:8px;}
    .material-gallery{grid-template-columns:1.2fr .8fr !important;height:200px;min-height:200px;gap:7px;}
    .material-gallery-small{gap:7px;}
    .material-gallery > img,
    .material-gallery-small img{border-radius:11px;}
    .material-copy{padding:0;min-width:0;}
    .material-copy h3{font-size:24px;line-height:1.2;overflow-wrap:anywhere;}
    .material-copy p{font-size:11px;line-height:1.65;overflow-wrap:anywhere;}
    .material-copy .btn,
    .material-cta{font-size:10px;max-width:100%;}

    /* Products — always 2 columns on mobile so layout stays close to desktop */
    .products-page{padding-top:55px;}
    .product-toolbar{grid-template-columns:1fr !important;gap:8px;}
    .product-catalog{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px;}
    .product-card{min-width:0;overflow:hidden;}
    .product-card img{height:175px;border-radius:11px;object-fit:cover;}
    .product-card-content{padding:9px 1px 3px;min-width:0;}
    .product-card-content h3{font-size:12px;line-height:1.3;overflow-wrap:anywhere;}
    .product-card-content p{font-size:9px;line-height:1.45;overflow-wrap:anywhere;}
    .product-subcategory{font-size:8px;}
    .product-bottom{display:flex;flex-direction:column;align-items:stretch;gap:5px;}
    .product-bottom strong{font-size:10px;margin:0;overflow-wrap:anywhere;}
    .product-inquiry-btn,
    .product-add-btn-small{width:100%;font-size:9px;padding:6px 5px;min-width:0;}

    /* Product detail */
    .product-detail-page{padding:42px 0;}
    .product-detail-grid{grid-template-columns:minmax(0,1fr) !important;gap:22px;}
    .main-product-image img{height:300px;object-fit:cover;}
    .product-thumbnails{gap:6px;overflow-x:auto;max-width:100%;}
    .product-thumbnails img{width:58px;height:58px;flex:0 0 58px;}
    .product-detail-info h1{font-size:26px;line-height:1.2;overflow-wrap:anywhere;}
    .product-detail-description{font-size:12px;line-height:1.75;overflow-wrap:anywhere;}
    .product-detail-price{font-size:23px;}
    .product-detail-actions{display:flex;flex-direction:column;gap:8px;}
    .product-detail-actions .btn{width:100%;margin:0;}

    /* Detail / Service pages */
    .detail-hero{padding:55px 0 42px;}
    .detail-hero h1{font-size:31px;line-height:1.2;overflow-wrap:anywhere;}
    .detail-section,
    .project-reference{padding:48px 0;}
    .service-detail-grid{grid-template-columns:minmax(0,1fr) !important;gap:24px;}
    .detail-benefits,
    .service-extra-grid,
    .reference-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px;}
    .detail-main-image{width:100%;max-height:360px;border-radius:14px;object-fit:cover;}
    .detail-copy h2{font-size:25px;line-height:1.25;overflow-wrap:anywhere;}
    .detail-copy p{font-size:12px;line-height:1.7;overflow-wrap:anywhere;}
    .detail-benefits > div,
    .service-extra-grid > div{padding:14px;min-width:0;}
    .detail-benefits h3,
    .service-extra-grid h3{font-size:14px;line-height:1.3;overflow-wrap:anywhere;}
    .detail-benefits p,
    .service-extra-grid p{font-size:10px;line-height:1.55;overflow-wrap:anywhere;}
    .reference-card img{height:150px;object-fit:cover;}

    /* Contact */
    .contact-grid{gap:18px;}
    .contact-item,
    .contact-box{min-width:0;}
    .contact-item strong{font-size:13px;}
    .contact-item p,
    .contact-box p{font-size:11px;line-height:1.6;overflow-wrap:anywhere;}

    /* Cart */
    .cart-page{padding-top:50px;}
    .cart-item{flex-direction:column;align-items:stretch;gap:12px;min-width:0;}
    .cart-item-control{width:100%;min-width:0;justify-content:space-between;}
    .cart-summary{width:100%;min-width:0;}

    /* Policy */
    .policy-page{padding:45px 0;}
    .policy-wrap{width:calc(100% - 20px);max-width:none;}
    .policy-wrap h1{font-size:27px;line-height:1.25;overflow-wrap:anywhere;}
    .policy-wrap h2{font-size:19px;line-height:1.3;overflow-wrap:anywhere;}
    .policy-wrap p,
    .policy-wrap li{font-size:11px;line-height:1.75;overflow-wrap:anywhere;word-break:break-word;}

    /* Footer — exactly 4 columns */
    footer{padding:48px 0 16px;}
    footer .footer-grid{
        grid-template-columns:minmax(0,.9fr) minmax(0,.65fr) minmax(0,.7fr) minmax(0,1.35fr) !important;
        gap:5px;
        width:100%;
    }
    footer .footer-grid > div{min-width:0;overflow:hidden;}
    footer .footer-logo{font-size:11px;line-height:1.15;margin-bottom:5px;overflow-wrap:anywhere;}
    footer p,
    footer a{font-size:7px;line-height:1.35;margin:3px 0;overflow-wrap:anywhere;}
    footer h4{font-size:8px;line-height:1.25;margin-bottom:5px;overflow-wrap:anywhere;}
    footer .footer-social{display:flex;gap:3px;flex-wrap:wrap;margin-top:6px;}
    footer .footer-social a{width:19px;height:19px;flex:0 0 19px;margin:0;}
    footer .footer-social img{width:11px;height:11px;}
    footer .copyright{margin-top:22px;padding-top:10px;font-size:7px;gap:4px;}
    footer .footer-policy-links{font-size:7px;gap:4px;white-space:normal;}
    footer .footer-privacy,
    footer .footer-cookie,
    footer .footer-policy-separator{font-size:7px !important;}
}

/* ---------- Very small phones: 320–390px ---------- */
@media (max-width:390px){
    .container{width:calc(100% - 16px);}
    .logo img{width:130px;}
    .hero{height:470px;}
    .hero h1{font-size:25px;}
    .hero-description{font-size:10px;}
    .hero-buttons .btn{font-size:9px;padding:8px 5px;}

    .services .service-grid,
    .projects .project-grid{gap:4px;}
    .services .service-card{height:195px;min-height:195px;border-radius:12px;}
    .services .service-content{left:5px;right:4px;bottom:7px;}
    .services .service-content > span{font-size:6px;}
    .services .service-content h3{font-size:9px;}
    .services .service-content p{font-size:7px;line-height:1.3;-webkit-line-clamp:2;}
    .services .service-content b{font-size:6px;}
    .projects .project{height:195px;border-radius:12px;}
    .projects .project img{border-radius:12px;}
    .projects .project div{left:5px;right:4px;bottom:6px;}
    .projects .project span{font-size:5px;}
    .projects .project h3{font-size:8px;}

    .material-gallery{height:180px;min-height:180px;}
    .material-copy h3{font-size:21px;}
    .material-copy p{font-size:10px;}

    .product-card img{height:155px;}
    .product-card-content h3{font-size:11px;}
    .product-card-content p{font-size:8px;}
    .product-inquiry-btn,
    .product-add-btn-small{font-size:8px;padding:5px 4px;}

    .detail-benefits,
    .service-extra-grid,
    .reference-grid{gap:5px;}
    .detail-benefits > div,
    .service-extra-grid > div{padding:10px;}

    footer .footer-grid{gap:3px;}
    footer .footer-logo{font-size:9px;}
    footer p, footer a{font-size:6px;}
    footer h4{font-size:7px;}
}

/* =========================================================
   BMC HOMEMART — FINAL RESPONSIVE LAYOUT FIX
   2026-09-13
   iPad + Mobile: keep Desktop-like horizontal layouts,
   scale images/text/buttons to viewport, prevent overflow.
========================================================= */

/* ---------- Global safety ---------- */
html, body{max-width:100%;overflow-x:hidden;}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;}

/* =========================================================
   MATERIAL STICKY — FIX PARENT OVERFLOW
   ให้หัวข้อของแต่ละ Material Section sticky จนจบ Section
========================================================= */
.material-showcase{
    position:relative;
    overflow:visible !important;
}
.material-panel,
.material-category-panel,
.material-feature,
.material-copy{
    overflow:visible !important;
}
.material-sticky-nav{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:82px !important;
    z-index:100 !important;
    background:#fff;
}

/* =========================================================
   iPAD — 601px ถึง 1024px
========================================================= */
@media (min-width:601px) and (max-width:1024px){

    .container{width:92%;max-width:1250px;}

    /* ---------- HERO ----------
       รูปกว้างประมาณ 50% และปุ่ม 3 ปุ่มแถวเดียว */
    .hero{
        height:500px;
        /*border-radius:24px;*/
    }
    .hero-slide{
        display:flex;
        align-items:stretch;
        justify-content:flex-end;
        background:#202020;
    }
    .hero-slide img{
        width:100% !important;
        height:100%;
        object-fit:cover;
        flex:0 0 100%;
    }
    .hero-content{
        left:50%;
        width:90%;
        max-width:none;
        padding:0 8px;
    }
    .hero h1{font-size:38px;line-height:1.12;margin:16px 0;}
    .hero-description{font-size:13px;line-height:1.55;max-width:460px;}
    .hero-buttons{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:8px !important;
        width:100%;
        max-width:520px;
    }
    .hero-buttons .btn{
        flex:1 1 0;
        min-width:0 !important;
        width:33.333%;
        padding:10px 8px !important;
        font-size:11px !important;
        line-height:1.2;
        white-space:nowrap;
        text-align:center;
    }

    /* ---------- ABOUT BMC ---------- */
    .intro{padding:55px 0;}
    .intro-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:22px !important;
        align-items:center;
    }
    .intro-image{width:100%;border-radius:24px;}
    .intro-image img{
        display:block;
        width:100% !important;
        height:300px !important;
        object-fit:cover;
        border-radius:24px;
    }
    .intro-content{padding:5px 0;min-width:0;}
    .intro-content .eyebrow{font-size:11px;letter-spacing:2px;}
    .intro-content h2{
        font-size:27px !important;
        line-height:1.2;
        margin:10px 0 15px;
        overflow-wrap:anywhere;
    }
    .intro-content p{
        font-size:12px;
        line-height:1.65;
        margin-bottom:12px;
        overflow-wrap:anywhere;
    }

    /* ---------- OUR SERVICES / OUR PROJECTS ---------- */
    .services,.projects{padding:70px 0;}
    .services .service-grid,
    .projects .project-grid{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:10px !important;
    }
    .service-card{
        height:285px !important;
        min-height:285px !important;
        padding:0 !important;
        border-radius:20px;
        overflow:hidden;
    }
    .service-card img{width:100%;height:100%;object-fit:cover;}
    .service-content{left:13px;right:10px;bottom:15px;}
    .service-content > span{font-size:9px;}
    .service-content h3{font-size:17px;line-height:1.2;margin:5px 0;}
    .service-content p{font-size:10px;line-height:1.45;margin-bottom:6px;}
    .service-content b{font-size:9px;white-space:nowrap;}

    .project{
        height:300px !important;
        border-radius:20px !important;
    }
    .project img{width:100%;height:100%;object-fit:cover;border-radius:20px !important;}
    .project div{left:13px;right:10px;bottom:15px;}
    .project span{font-size:8px;letter-spacing:1px;}
    .project h3{font-size:16px;line-height:1.2;}

    /* ---------- MATERIAL 4 SECTIONS ---------- */
    #natural-stone .material-feature,
    #synthetic-stone .material-feature,
    #wood-floor .material-feature,
    #other-products .material-feature{
        grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr) !important;
        gap:20px !important;
        align-items:center;
    }
    #natural-stone .material-gallery,
    #synthetic-stone .material-gallery,
    #wood-floor .material-gallery,
    #other-products .material-gallery{
        width:100%;
        height:410px !important;
        min-height:410px !important;
        grid-template-columns:1.35fr .8fr !important;
        gap:9px !important;
    }
    #natural-stone .material-gallery-small,
    #synthetic-stone .material-gallery-small,
    #wood-floor .material-gallery-small,
    #other-products .material-gallery-small{gap:9px !important;}
    #natural-stone .material-gallery > img,
    #natural-stone .material-gallery-small img,
    #synthetic-stone .material-gallery > img,
    #synthetic-stone .material-gallery-small img,
    #wood-floor .material-gallery > img,
    #wood-floor .material-gallery-small img,
    #other-products .material-gallery > img,
    #other-products .material-gallery-small img{
        width:100%;height:40%;object-fit:cover;display:block;
    }
    .material-heading{gap:20px;margin-bottom:20px;}
    .material-heading h2{font-size:34px;}
    .material-heading-copy{font-size:12px;line-height:1.6;max-width:360px;}
    .material-category-btn{font-size:11px;padding:8px 12px;}
    .material-copy{padding:0 !important;min-width:0;}
    .material-copy h3{font-size:32px !important;line-height:1.15;margin:7px 0 12px;}
    .material-copy p{font-size:12px;line-height:1.65;margin:0;overflow-wrap:anywhere;}
    #natural-stone .material-tags,
    #synthetic-stone .material-tags,
    #wood-floor .material-tags,
    #other-products .material-tags{display:none !important;}

    /* ---------- CONTACT + REQUEST A QUOTE ---------- */
    .contact{padding:70px 0;}
    .contact-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:24px !important;
        align-items:start;
    }
    .contact-grid > div{min-width:0;}
    .contact h2{font-size:34px;line-height:1.2;}
    .contact-item strong{font-size:12px;}
    .contact-item p{font-size:11px;line-height:1.55;overflow-wrap:anywhere;}
    .contact-box{padding:20px;min-width:0;}
    .contact-box h3{font-size:22px;line-height:1.2;}
    .contact-box p{font-size:11px;line-height:1.55;}
    .contact-box input,.contact-box textarea{font-size:11px;max-width:100%;}
    .contact-box .btn{font-size:11px;padding:10px 16px;}

    /* ---------- FOOTER 4 COLUMNS ---------- */
    footer{padding:55px 0 18px;}
    footer .footer-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1.05fr) minmax(0,.7fr) minmax(0,.75fr) minmax(0,1.35fr) !important;
        gap:10px !important;
        align-items:start;
    }
    footer .footer-grid > div{min-width:0;overflow:visible;}
    footer .footer-logo{font-size:16px;line-height:1.15;}
    footer h4{font-size:11px;line-height:1.3;margin-bottom:7px;overflow-wrap:anywhere;}
    footer p,footer a{font-size:9px;line-height:1.4;margin:4px 0;overflow-wrap:anywhere;}
    footer .footer-social{gap:4px;flex-wrap:wrap;}
    footer .footer-social a{width:25px;height:25px;flex:0 0 25px;}
    footer .footer-social img{width:15px;height:15px;}
}

/* =========================================================
   MOBILE — 320px ถึง 600px
   ยังคง layout แนวนอนแบบ Desktop ในส่วนที่ผู้ใช้ระบุ
========================================================= */
@media (max-width:600px){

    .container{width:calc(100% - 16px);max-width:none;}

    /* ---------- HERO ---------- */
    .hero{height:430px !important;border-radius:0px;}
    .hero-slide{
        display:flex;
        align-items:stretch;
        justify-content:flex-end;
        background:#202020;
    }
    .hero-slide img{
        width:100% !important;
        flex:0 0 50%;
        height:100%;
        object-fit:cover;
    }
    .hero-content{
        left:50%;
        width:94%;
        max-width:none;
        padding:0 4px;
    }
    .hero h1{font-size:23px !important;line-height:1.12;margin:10px 0;}
    .hero-description{font-size:9px !important;line-height:1.45;max-width:240px;}
    .hero-buttons{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:4px !important;
        width:100%;
        max-width:290px;
    }
    .hero-buttons .btn{
        flex:1 1 0 !important;
        width:33.333% !important;
        min-width:0 !important;
        padding:7px 3px !important;
        font-size:8px !important;
        line-height:1.15;
        white-space:nowrap;
        text-align:center;
    }

    /* ---------- ABOUT BMC — รูป + ข้อความแถวเดียว ---------- */
    .intro{padding:42px 0;}
    .intro-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:10px !important;
        align-items:center;
    }
    .intro-image{width:100%;border-radius:16px;}
    .intro-image img{
        display:block;
        width:100% !important;
        height:190px !important;
        object-fit:cover;
        border-radius:16px;
    }
    .intro-content{padding:0;min-width:0;}
    .intro-content .eyebrow{font-size:7px;letter-spacing:1px;}
    .intro-content h2{
        font-size:15px !important;
        line-height:1.18;
        margin:6px 0 8px;
        overflow-wrap:anywhere;
    }
    .intro-content p{
        font-size:8px;
        line-height:1.45;
        margin-bottom:7px;
        overflow-wrap:anywhere;
    }
    .intro-content .text-link{font-size:8px;}

    /* ---------- SERVICES 3 รูปแถวเดียว ---------- */
    .services,.projects{padding:48px 0;}
    .services .service-grid,
    .projects .project-grid{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:4px !important;
        width:100%;
    }
    .service-card{
        width:100%;height:185px !important;min-height:185px !important;
        padding:0 !important;border-radius:11px;overflow:hidden;
    }
    .service-card img{width:100%;height:100%;object-fit:cover;}
    .service-content{left:5px;right:4px;bottom:7px;}
    .service-content > span{font-size:5px;letter-spacing:.5px;}
    .service-content h3{font-size:9px;line-height:1.15;margin:2px 0;}
    .service-content p{font-size:6px;line-height:1.3;margin:0 0 2px;-webkit-line-clamp:2;}
    .service-content b{font-size:6px;white-space:nowrap;}

    /* ---------- PROJECTS 3 รูปแถวเดียว ---------- */
    .project{width:100%;height:190px !important;border-radius:11px !important;}
    .project img{width:100%;height:100%;object-fit:cover;border-radius:11px !important;}
    .project div{left:5px;right:4px;bottom:6px;}
    .project span{font-size:5px;letter-spacing:.5px;}
    .project h3{font-size:8px;line-height:1.15;}

    /* ---------- MATERIAL 4 SECTIONS ----------
       รูป 3 รูป + คำอธิบายอยู่แถวเดียวกัน */
    .material-showcase{padding:45px 0 !important;overflow:visible !important;}
    .material-container{width:calc(100% - 16px);max-width:none;}
    .material-sticky-nav{
        top:74px !important;
        max-width:100%;
        overflow:visible !important;
    }
    .material-heading{gap:8px;margin-bottom:12px;}
    .material-heading h2{font-size:24px !important;line-height:1.15;}
    .material-heading-copy{font-size:8px;line-height:1.45;max-width:180px;}
    .material-category-tabs{max-width:100%;overflow-x:auto;gap:4px;padding:6px 0 9px;}
    .material-category-btn{font-size:8px;padding:6px 8px;}

    #natural-stone .material-feature,
    #synthetic-stone .material-feature,
    #wood-floor .material-feature,
    #other-products .material-feature{
        display:grid !important;
        grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) !important;
        gap:7px !important;
        align-items:center;
    }
    #natural-stone .material-gallery,
    #synthetic-stone .material-gallery,
    #wood-floor .material-gallery,
    #other-products .material-gallery{
        display:grid !important;
        grid-template-columns:1.3fr .7fr !important;
        gap:5px !important;
        width:100%;
        height:250px !important;
        min-height:250px !important;
        overflow:hidden !important;
    }
    #natural-stone .material-gallery-small,
    #synthetic-stone .material-gallery-small,
    #wood-floor .material-gallery-small,
    #other-products .material-gallery-small{gap:5px !important;}
    #natural-stone .material-gallery > img,
    #natural-stone .material-gallery-small img,
    #synthetic-stone .material-gallery > img,
    #synthetic-stone .material-gallery-small img,
    #wood-floor .material-gallery > img,
    #wood-floor .material-gallery-small img,
    #other-products .material-gallery > img,
    #other-products .material-gallery-small img{
        width:100%;height:40%;min-width:0;min-height:0;object-fit:cover;display:block;border-radius:9px;
    }
    .material-copy{padding:0 !important;min-width:0;}
    .material-number{font-size:7px;letter-spacing:1px;}
    .material-copy h3{font-size:18px !important;line-height:1.1;margin:4px 0 6px;overflow-wrap:anywhere;}
    .material-copy p{font-size:8px;line-height:1.45;margin:0;overflow-wrap:anywhere;}
    .material-cta{font-size:8px;padding:5px 0;gap:8px;}
    .material-cta span{font-size:13px;}
    #natural-stone .material-tags,
    #synthetic-stone .material-tags,
    #wood-floor .material-tags,
    #other-products .material-tags{display:none !important;}

    /* ---------- CONTACT + REQUEST A QUOTE แถวเดียว ---------- */
    .contact{padding:48px 0;}
    .contact-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:10px !important;
        align-items:start;
    }
    .contact-grid > div{min-width:0;}
    .contact .eyebrow{font-size:7px;letter-spacing:1px;}
    .contact h2{font-size:23px;line-height:1.15;margin:7px 0 12px;}
    .contact-item{margin-bottom:8px;}
    .contact-item strong{font-size:8px;}
    .contact-item p{font-size:7px;line-height:1.4;margin:2px 0;overflow-wrap:anywhere;}
    .contact-box{padding:11px !important;min-width:0;border-radius:12px;}
    .contact-box h3{font-size:14px;line-height:1.15;margin-bottom:6px;}
    .contact-box p{font-size:7px;line-height:1.4;margin-bottom:7px;}
    .contact-box input,.contact-box textarea{width:100%;font-size:7px;padding:6px;min-width:0;}
    .contact-box textarea{min-height:55px;}
    .contact-box .btn{font-size:7px;padding:7px 8px;width:auto;max-width:100%;}

    /* ---------- FOOTER 4 กลุ่มแถวเดียว ---------- */
    footer{padding:42px 0 14px;}
    footer .footer-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1.05fr) minmax(0,.7fr) minmax(0,.75fr) minmax(0,1.35fr) !important;
        gap:4px !important;
        width:100%;
    }
    footer .footer-grid > div{min-width:0;overflow:visible;}
    footer .footer-logo{font-size:9px;line-height:1.1;margin-bottom:4px;}
    footer h4{font-size:7px;line-height:1.2;margin-bottom:4px;overflow-wrap:anywhere;}
    footer p,footer a{font-size:6px;line-height:1.3;margin:2px 0;overflow-wrap:anywhere;word-break:break-word;}
    footer .footer-social{display:flex;gap:2px;flex-wrap:wrap;margin-top:5px;}
    footer .footer-social a{width:16px;height:16px;flex:0 0 16px;margin:0;}
    footer .footer-social img{width:9px;height:9px;}
    footer .copyright{margin-top:18px;padding-top:9px;font-size:6px;line-height:1.3;}
    footer .footer-policy-links{font-size:6px;gap:3px;}
}

/* ---------- Very small phones: 320–390px ---------- */
@media (max-width:390px){
    .hero{height:400px !important;}
    .hero h1{font-size:20px !important;}
    .hero-description{font-size:8px !important;}
    .hero-buttons{max-width:270px;gap:3px !important;}
    .hero-buttons .btn{font-size:7px !important;padding:6px 2px !important;}
    .intro-image img{height:165px !important;}
    .intro-content h2{font-size:13px !important;}
    .intro-content p{font-size:7px;}
    .material-heading h2{font-size:21px !important;}
    #natural-stone .material-gallery,
    #synthetic-stone .material-gallery,
    #wood-floor .material-gallery,
    #other-products .material-gallery{height:165px !important;min-height:165px !important;}
    .material-copy h3{font-size:16px !important;}
    .material-copy p{font-size:7px;}
    .contact-item p{font-size:6px;}
    .contact-box h3{font-size:12px;}
    .contact-box p,.contact-box input,.contact-box textarea{font-size:6px;}
    footer .footer-logo{font-size:8px;}
    footer h4{font-size:6px;}
    footer p,footer a{font-size:5.5px;}
}




/* =========================================================
   FINAL — SIMPLE STICKY FIX FOR THE 4 MATERIAL SECTIONS
   Scope: ONLY Sticky behavior.
   Keeps the existing HTML, content and layout unchanged.
   ========================================================= */

/* Important:
   overflow-x:hidden on html/body can create a scroll container
   and prevent position:sticky from behaving correctly.
   clip prevents horizontal overflow without creating that
   scrolling ancestor. */
html,
body{
    max-width:100%;
    overflow-x:clip !important;
}

/* The sticky element must have no overflow-clipping ancestor. */
#natural-stone,
#synthetic-stone,
#wood-floor,
#other-products{
    position:relative;
    overflow:visible !important;
}

/* Keep the existing container/layout; only remove overflow
   that could block Sticky. */
#natural-stone > .material-container,
#synthetic-stone > .material-container,
#wood-floor > .material-container,
#other-products > .material-container,
#natural-stone .material-panel,
#synthetic-stone .material-panel,
#wood-floor .material-panel,
#other-products .material-panel{
    position:relative;
    overflow:visible !important;
}

/* One common Sticky rule for all 4 sections. */
#natural-stone .material-sticky-nav,
#synthetic-stone .material-sticky-nav,
#wood-floor .material-sticky-nav,
#other-products .material-sticky-nav{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:82px !important;
    z-index:1000 !important;
    background:#fff;
}

/* Only the category row may scroll horizontally.
   This does NOT become the Sticky container itself. */
#natural-stone .material-category-tabs,
#synthetic-stone .material-category-tabs,
#wood-floor .material-category-tabs,
#other-products .material-category-tabs{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    max-width:100%;
}

/* End of Sticky fix */


/* BMC HOMEMART — Sticky fallback spacer */
.material-sticky-spacer{display:none;height:0;}


/* =========================================================
   BMC HOMEMART — PROJECT SLIDER + CLIENT LOGO MARQUEE
   NOTE: เพิ่ม/แก้ไขเฉพาะ OUR PROJECTS และแบนเนอร์โลโก้ลูกค้า
   จุดแก้ไขหลัก:
   1) ขนาดรูป OUR PROJECTS -> --project-card-height
   2) ระยะห่างรูป OUR PROJECTS -> --project-gap
   3) ขนาดโลโก้ -> --client-logo-size
   4) ระยะห่างโลโก้ -> --client-logo-gap
   5) ระยะห่างจาก OUR PROJECTS ถึงโลโก้ -> --client-logo-banner-margin-top
   6) โลโก้วิ่งขวา -> ซ้าย เป็นค่าเริ่มต้น
      ถ้าต้องการ ซ้าย -> ขวา ให้เปลี่ยน
      animation-direction: reverse;
   7) รายการ/URL รูปโลโก้แก้ใน index.html เท่านั้น
========================================================= */

.projects{
    --project-gap:20px;
    --project-card-height:450px;
}

.project-slider{
    position:relative;
    width:100%;
}

.project-viewport{
    width:100%;
    overflow:hidden;
    position:relative;
}

.project-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:var(--project-gap) !important;
    width:max-content;
    transition:transform .45s ease;
    will-change:transform;
}

.project-track .project{
    flex:0 0 calc((var(--project-viewport-width, 100%) - (var(--project-gap) * 2)) / 3);
    width:calc((var(--project-viewport-width, 100%) - (var(--project-gap) * 2)) / 3);
    height:var(--project-card-height) !important;
    min-width:0;
    box-sizing:border-box;
}

.project-track .project img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.project-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:15;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:#1b1b1b;
    box-shadow:0 6px 22px rgba(0,0,0,.15);
    font-size:25px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
}

.project-arrow:hover{
    transform:translateY(-50%) scale(1.05);
}

.project-arrow:disabled{
    opacity:.35;
    cursor:not-allowed;
    transform:translateY(-50%);
}

.project-prev{left:-23px;}
.project-next{right:-23px;}

/* ---------- CLIENT LOGO MARQUEE ---------- */
.client-logo-banner{
    --client-logo-size:35px;
    --client-logo-gap:58px;
    --client-logo-banner-margin-top:58px;
    margin-top:var(--client-logo-banner-margin-top);
    width:100%;
    overflow:hidden;
}

.client-logo-viewport{
    width:100%;
    overflow:hidden;
}

.client-logo-track{
    display:flex;
    width:max-content;
    animation:bmcLogoMarquee 35s linear infinite;
    will-change:transform;
}

.client-logo-set{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    gap:var(--client-logo-gap);
}

.client-logo-item{
    width:var(--client-logo-size);
    height:var(--client-logo-size);
    flex:0 0 var(--client-logo-size);
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:0;
    padding:0;
}

.client-logo-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border:0;
    background:transparent;
}

@keyframes bmcLogoMarquee{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

/* NOTE:
   หากต้องการให้โลโก้วิ่งจาก "ซ้าย -> ขวา"
   แก้ animation-direction เป็น reverse:
   .client-logo-track{animation-direction:reverse;}
*/

@media (min-width:601px) and (max-width:1024px){
    .projects{
        --project-gap:12px;
        --project-card-height:300px;
    }

    .project-track .project{
        flex-basis:calc((100% - (var(--project-gap) * 2)) / 3);
        width:calc((100% - (var(--project-gap) * 2)) / 3);
    }

    .project-arrow{
        width:40px;
        height:40px;
        font-size:21px;
    }

    .project-prev{left:-12px;}
    .project-next{right:-12px;}

    .client-logo-banner{
        --client-logo-size:30px;
        --client-logo-gap:42px;
        --client-logo-banner-margin-top:45px;
    }

    .client-logo-track{
        animation-duration:30s;
    }
}

/* NOTE: Mobile ทั้งแนวตั้งและแนวนอน
   - ยังแสดง OUR PROJECTS ครั้งละ 3 รูป
   - ปรับขนาดรูป/ช่องว่างตามพื้นที่จอ
   - โลโก้ยังวิ่งต่อเนื่องเหมือน Desktop/iPad */
@media (max-width:600px){
    .projects{
        --project-gap:5px;
        --project-card-height:190px;
    }

    .project-slider{
        padding:0 1px;
    }

    .project-track .project{
        flex-basis:calc((100% - (var(--project-gap) * 2)) / 3);
        width:calc((100% - (var(--project-gap) * 2)) / 3);
        border-radius:11px !important;
    }

    .project-track .project img{
        border-radius:11px !important;
    }

    .project-arrow{
        width:30px;
        height:30px;
        font-size:17px;
        box-shadow:0 4px 14px rgba(0,0,0,.16);
    }

    .project-prev{left:-7px;}
    .project-next{right:-7px;}

    .client-logo-banner{
        --client-logo-size:20px;
        --client-logo-gap:30px;
        --client-logo-banner-margin-top:32px;
    }

    .client-logo-track{
        animation-duration:25s;
    }
}

/* =========================================================
   MATERIAL 4 SECTIONS — IMAGE 1 / IMAGE 2 / IMAGE 3
   NOTE: ใช้กติกาเดียวกันทั้ง 4 section
   - รูป 1 = คอลัมน์ใหญ่ด้านซ้าย สูงเท่ากับรูป 2 + ช่องว่าง + รูป 3
   - รูป 2 และ 3 = ขนาดเท่ากัน
   - ช่องว่างระหว่างรูป 1-2 = ช่องว่างระหว่างรูป 2-3
   - object-fit:cover เพื่อไม่ให้รูปยืด
   - แก้รูปจริง (src) ที่ index.html
========================================================= */

#natural-stone .material-gallery,
#synthetic-stone .material-gallery,
#wood-floor .material-gallery,
#other-products .material-gallery{
    display:grid !important;
    grid-template-columns:1.55fr .75fr !important;
    grid-template-rows:1fr !important;
    gap:12px !important;
    width:100%;
    height:520px !important;
    min-height:520px !important;
    overflow:hidden;
}

#natural-stone .material-gallery > img,
#synthetic-stone .material-gallery > img,
#wood-floor .material-gallery > img,
#other-products .material-gallery > img{
    grid-column:1;
    grid-row:1;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
}

#natural-stone .material-gallery-small,
#synthetic-stone .material-gallery-small,
#wood-floor .material-gallery-small,
#other-products .material-gallery-small{
    grid-column:2;
    grid-row:1;
    display:grid !important;
    grid-template-rows:1fr 1fr !important;
    gap:12px !important;
    width:100%;
    height:100%;
    min-height:0;
}

#natural-stone .material-gallery-small img,
#synthetic-stone .material-gallery-small img,
#wood-floor .material-gallery-small img,
#other-products .material-gallery-small img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
}

/* NOTE: iPad แนวนอน/แนวตั้ง — ใช้ 2 คอลัมน์เหมือน Desktop */
@media (min-width:601px) and (max-width:1024px){
    #natural-stone .material-gallery,
    #synthetic-stone .material-gallery,
    #wood-floor .material-gallery,
    #other-products .material-gallery{
        grid-template-columns:1.55fr .75fr !important;
        gap:10px !important;
        height:390px !important;
        min-height:390px !important;
    }

    #natural-stone .material-gallery-small,
    #synthetic-stone .material-gallery-small,
    #wood-floor .material-gallery-small,
    #other-products .material-gallery-small{
        gap:10px !important;
    }
}

/* NOTE: Mobile Portrait + Landscape — ยังรักษา 3 รูปในชุดเดียว
   รูป 1 สูงเท่ากับรูป 2+gap+รูป 3 และรูป 2/3 เท่ากัน */
@media (max-width:600px){
    #natural-stone .material-gallery,
    #synthetic-stone .material-gallery,
    #wood-floor .material-gallery,
    #other-products .material-gallery{
        grid-template-columns:1.55fr .75fr !important;
        gap:6px !important;
        height:245px !important;
        min-height:245px !important;
    }

    #natural-stone .material-gallery-small,
    #synthetic-stone .material-gallery-small,
    #wood-floor .material-gallery-small,
    #other-products .material-gallery-small{
        gap:6px !important;
    }

    #natural-stone .material-gallery > img,
    #natural-stone .material-gallery-small img,
    #synthetic-stone .material-gallery > img,
    #synthetic-stone .material-gallery-small img,
    #wood-floor .material-gallery > img,
    #wood-floor .material-gallery-small img,
    #other-products .material-gallery > img,
    #other-products .material-gallery-small img{
        border-radius:9px !important;
    }
}

/* NOTE: จุดเปลี่ยนรูปสินค้าใน 4 section:
   1) หินธรรมชาติ -> index.html ใน <section id="natural-stone">
   2) หินสังเคราะห์ -> index.html ใน <section id="synthetic-stone">
   3) พื้นไม้ของเรา -> index.html ใน <section id="wood-floor">
   4) สินค้าอื่นๆ -> index.html ใน <section id="other-products">
   แต่ละหมวดมี <div class="material-gallery"> = รูปที่ 1
   และ <div class="material-gallery-small"> = รูปที่ 2 + รูปที่ 3
*/


/* =========================================================
   BMC HOMEMART — OUR PROJECTS FINAL SINGLE-ROW FIX
   NOTE:
   - .project-track มีรูปทั้ง 12 รูปอยู่ในแถวเดียวเท่านั้น
   - แสดงครั้งละ 3 รูปทุกอุปกรณ์
   - เลื่อนด้วยลูกศรครั้งละ 3 รูป
   - แก้ขนาดช่องว่างระหว่างรูปที่ --project-gap
   - แก้ความสูงรูปที่ --project-card-height
========================================================= */
.project-viewport{overflow:hidden !important;}
.project-track{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;width:max-content !important;}
.project-track .project{flex:0 0 var(--project-card-width) !important;width:var(--project-card-width) !important;min-width:var(--project-card-width) !important;box-sizing:border-box !important;}
.project-track .project-image{display:block;width:100%;height:100%;object-fit:cover;}
@media (max-width:600px){
  .project-track{gap:var(--project-gap) !important;}
  .project-track .project{flex:0 0 var(--project-card-width) !important;width:var(--project-card-width) !important;min-width:var(--project-card-width) !important;}
}

/* =========================================================
   URGENT FIX — OUR PROJECTS 12 รูป / iPad + Mobile PORTRAIT
   NOTE: ใช้ความกว้างของ viewport จริงที่ script.js คำนวณไว้
   NOTE: ห้ามใช้ 100% ของ .project-track เพราะ track มีความกว้าง 12 รูป
   ซึ่งเป็นสาเหตุให้ iPad/มือถือแนวตั้งแสดงผลผิดขนาด
   NOTE: แก้เฉพาะ OUR PROJECTS ไม่กระทบ Section อื่น
========================================================= */
.project-track .project{
    flex:0 0 var(--project-card-width) !important;
    width:var(--project-card-width) !important;
    min-width:var(--project-card-width) !important;
    max-width:var(--project-card-width) !important;
    box-sizing:border-box !important;
}

.project-track{
    flex-wrap:nowrap !important;
    width:max-content !important;
}

.project-viewport{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
}

@media (min-width:601px) and (max-width:1024px){
    /* NOTE: iPad แนวตั้ง + แนวนอน — แสดง 3 รูปในแถวเดียว */
    .project-track .project{
        flex:0 0 var(--project-card-width) !important;
        width:var(--project-card-width) !important;
        min-width:var(--project-card-width) !important;
    }
}

@media (max-width:600px){
    /* NOTE: มือถือแนวตั้ง + แนวนอน — แสดง 3 รูปในแถวเดียว */
    .project-track .project{
        flex:0 0 var(--project-card-width) !important;
        width:var(--project-card-width) !important;
        min-width:var(--project-card-width) !important;
    }
}


/* =========================================================
   FINAL FIX — OUR PROJECTS: 12 รูปแถวเดียว / แสดง 3 รูป / เลื่อนทีละ 3
   NOTE: ห้ามแก้เป็น grid หรือ flex-wrap:wrap
   - รูปทั้ง 12 ต้องอยู่ใน .project-track แถวเดียว
   - .project-viewport แสดงหน้าต่างครั้งละ 3 รูป
   - ปุ่มลูกศรเลื่อนทีละ 3 รูป
   - ใช้ได้ Desktop / iPad Portrait + Landscape / Mobile Portrait + Landscape
========================================================= */
.project-slider .project-viewport{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    position:relative !important;
}
.project-slider .project-track{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    width:max-content !important;
    max-width:none !important;
    gap:var(--project-gap,20px) !important;
    transition:transform .45s ease !important;
    will-change:transform;
}
.project-slider .project-track > .project{
    display:block !important;
    flex:0 0 var(--project-card-width) !important;
    width:var(--project-card-width) !important;
    min-width:var(--project-card-width) !important;
    max-width:var(--project-card-width) !important;
    height:var(--project-card-height,450px) !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
.project-slider .project-track > .project .project-image,
.project-slider .project-track > .project > img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}
@media (min-width:601px) and (max-width:1024px){
    .project-slider .project-track{gap:12px !important;}
    .project-slider .project-track > .project{height:300px !important;}
}
@media (max-width:600px){
    .project-slider .project-track{gap:6px !important;}
    .project-slider .project-track > .project{height:190px !important;}
}



/* =========================================================
   FINAL MATERIAL SPACING — 2026-09-15
   Compact the four main material sections without changing
   the sticky behavior or sticky top offset.
========================================================= */
.material-showcase{
    padding:58px 0 52px !important;
    scroll-margin-top:82px;
}
.material-showcase + .material-showcase{
    padding-top:34px !important;
}
.material-heading{
    margin-bottom:14px !important;
    gap:22px !important;
}
.material-section-heading{
    margin-top:34px !important;
}
.material-section-heading:first-child{
    margin-top:0 !important;
}
.material-sticky-nav{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:82px !important;
    z-index:100 !important;
}
.material-category-tabs{
    gap:7px !important;
    padding:5px 0 11px !important;
}
.material-category-btn{
    padding:8px 14px !important;
    font-size:13px !important;
}
.material-copy h3{
    margin:7px 0 12px !important;
}
.material-copy p{
    margin-bottom:10px !important;
}
.material-cta{
    margin-top:0 !important;
    padding:7px 0 !important;
}

/* Service detail gallery / fabrication content */
.service-detail-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-top:30px;
}
.service-detail-gallery figure{
    margin:0;
    overflow:hidden;
    border:1px solid #eee;
    border-radius:18px;
    background:#fff;
}
.service-detail-gallery img{
    display:block;
    width:100%;
    height:240px;
    object-fit:cover;
}
.service-detail-gallery figcaption{
    padding:14px 16px 16px;
    font-size:14px;
    line-height:1.55;
    color:#555;
}
.service-gallery-section .section-heading > p:last-child{
    color:#777;
    line-height:1.8;
    max-width:780px;
}
.service-special-section{
    background:#f8f7f4;
}
.service-special{max-width:1180px;}
.service-special .section-heading + .service-feature-grid{margin-top:28px;}
.service-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}
.service-feature-grid article{
    padding:26px;
    background:#fff;
    border:1px solid #eee;
    border-radius:18px;
}
.service-feature-grid h3{margin:0 0 10px;font-size:20px;line-height:1.35;}
.service-feature-grid p{margin:0;color:#777;line-height:1.8;font-size:14px;}
.service-custom-heading{margin-top:48px !important;}

@media (max-width:1024px){
    .material-showcase{padding:42px 0 38px !important;}
    .material-showcase + .material-showcase{padding-top:26px !important;}
    .material-heading{margin-bottom:10px !important;}
    .material-category-tabs{padding:4px 0 8px !important;}
    .material-category-btn{padding:7px 10px !important;font-size:11px !important;}
    .material-copy h3{margin:5px 0 8px !important;}
    .material-copy p{margin-bottom:7px !important;}
    .service-detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
    .service-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
    .material-showcase{padding:36px 0 32px !important;}
    .material-showcase + .material-showcase{padding-top:22px !important;}
    .material-heading{margin-bottom:8px !important;gap:10px !important;}
    .material-category-tabs{padding:3px 0 7px !important;gap:5px !important;}
    .material-category-btn{padding:7px 10px !important;font-size:11px !important;}
    .material-cta{padding:6px 0 !important;}
    .service-detail-gallery,.service-feature-grid{grid-template-columns:1fr;gap:14px;}
    .service-detail-gallery img{height:220px;}
    .service-feature-grid article{padding:20px;}
}

/* =========================================================
   BMC SERVICE DETAIL — NEW REFERENCE-MATCHED PAGES
   Scope: service-detail.html only. Header / footer and other
   pages are intentionally not changed by these rules.
   ========================================================= */
body.service-detail-page{background:#f7f6f3;color:#171717;overflow-x:hidden}
body.service-detail-page .svc-main{font-family:'Prompt',sans-serif}
.svc-wrap{width:min(1120px,calc(100% - 96px));margin:0 auto}
.svc-eyebrow{display:block;font-size:12px;letter-spacing:2.1px;font-weight:500;text-transform:uppercase;color:#9a7650;margin-bottom:8px}
.svc-section-head{margin-bottom:28px}
.svc-section-head h2{margin:0 0 7px;font-size:35px;line-height:1.2;font-weight:600;letter-spacing:-.5px}
.svc-section-head p{margin:0;max-width:760px;font-size:14px;line-height:1.8;color:#5d5a56}
.svc-btn{display:inline-flex;align-items:center;justify-content:center;min-width:132px;padding:10px 20px;border-radius:22px;background:#a27a4f;color:#fff!important;text-decoration:none;font-size:12px;font-weight:500;box-shadow:0 5px 15px rgba(0,0,0,.12)}
.svc-btn-dark{background:#a27a4f}

/* dark craft / polishing top */
/* ---------- DARK CRAFT / POLISHING TOP ---------- */

/* ส่วนบนของหน้างานทำผิวหิน */
.svc-dark-top{
    background:#31485b;
    color:#fff;
    padding:25px 0 0;
    position:relative;
    overflow:hidden;
}

/* ---------- HERO SECTION ---------- */
/* ส่วน Hero ด้านบน แบ่งเป็นรูปภาพซ้าย + ข้อมูลขวา */
.svc-hero-dark{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:center;
    min-height:320px;
}

/* รูปภาพ Hero */
.svc-hero-photo{
    height:250px;
    border-radius:8px;
    overflow:hidden;
}

/* รูปภาพภายใน Hero */
.svc-hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* กรอบข้อมูลด้านขวาของ Hero */
.svc-hero-panel{
    height:250px;
    position:relative;
    border:1px solid #b99779;
    border-radius:2px;
    padding:7px;
}

/* เส้นโค้งตกแต่งภายในกรอบ Hero */
.svc-ring{
    position:absolute;
    inset:0;
    border:1px solid #a87f60;
    border-radius:150px 150px 0 0;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    opacity:.9;
}

/* เนื้อหาภายในกรอบ Hero */
.svc-panel-content{
    position:relative;
    z-index:1;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px 36px;
    border:1px solid rgba(192,157,126,.35);
    border-radius:135px 135px 0 0;
}

/* ข้อความหัวข้อเล็กด้านบน */
.svc-panel-content .svc-eyebrow{
    color:#c4a283;
}

/* หัวข้อหลัก Hero */
.svc-panel-content h1{
    font-size:31px;
    line-height:1.35;
    font-weight:400;
    margin:0 0 15px;
    white-space:normal;
}

/* เส้นคั่น */
.svc-rule{
    height:1px;
    width:80%;
    background:#a9866d;
    margin:0 0 15px;
}

/* คำอธิบาย Hero */
.svc-panel-content p{
    font-size:12px;
    line-height:1.75;
    color:#eef1f2;
    margin:0 0 10px;
}

/* ข้อความหมายเหตุ */
.svc-hero-note{
    opacity:.9;
}

/* ปุ่มใน Hero */
.svc-panel-content .svc-btn{
    align-self:flex-start;
    margin-top:3px;
}


/* ---------- PORTFOLIO SECTION ---------- */
/* ส่วนแสดงผลงานและภาพตัวอย่าง */
.svc-portfolio-dark{
    display:grid;
    grid-template-columns:40% 60%;
    gap:20px;
    align-items:center;
    padding:35px 0 30px;
    min-height:260px;
}

/* กลุ่มข้อความฝั่งซ้าย */
.svc-portfolio-copy{
    padding-bottom:15px;
}

/* ข้อความหัวข้อเล็ก */
.svc-portfolio-copy .svc-eyebrow{
    color:#c4a283;
}

/* หัวข้อ Portfolio */
.svc-portfolio-copy h2{
    font-size:31px;
    line-height:1.25;
    font-weight:400;
    margin:0 0 12px;
}

/* คำอธิบาย Portfolio */
.svc-portfolio-copy p{
    font-size:12px;
    line-height:1.8;
    color:#edf0f1;
    margin:0 0 12px;
    max-width:380px;
}

/* ข้อความขนาดเล็ก */
.svc-portfolio-copy .svc-small-copy{
    font-size:11px;
    color:#cbd2d6;
}


/* ---------- COLLAGE IMAGES ---------- */
/* กลุ่มรูปภาพผลงานด้านขวา */
.svc-collage{
    position:relative;
    height:230px;
    max-width:600px;
    margin-left:auto;
}

/* กรอบรูปแต่ละใบ */
.svc-collage figure{
    position:absolute;
    margin:0;
    overflow:hidden;
    border:3px solid #b9aa9e;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    background:#fff;
}

/* รูปภาพภายใน Collage */
.svc-collage img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ไม่แสดงคำอธิบายใต้รูป */
.svc-collage figcaption{
    display:none;
}


/* ---------- COLLAGE IMAGE POSITIONS ---------- */
/* 
   กลุ่มรูปภาพ Collage ของส่วนงานบริการ
   จัดตำแหน่งใหม่ให้รูปทั้ง 5 ใบไม่ซ้อนทับกัน
   และอยู่ภายในพื้นที่ของ Section โดยไม่ล้นจอ
*/

/* รูปที่ 1 — ซ้ายบน */
.svc-collage-1{
    width:135px;
    height:105px;
    left:2%;
    top:15px;
    transform:rotate(-1deg);
}

/* รูปที่ 2 — กลางบน */
.svc-collage-2{
    width:150px;
    height:114px;
    left:34%;
    top:5px;
    transform:rotate(1deg);
}

/* รูปที่ 3 — ขวาบน */
.svc-collage-3{
    width:135px;
    height:103px;
    right:2%;
    top:15px;
    transform:rotate(1deg);
}

/* รูปที่ 4 — ซ้ายล่าง */
.svc-collage-4{
    width:135px;
    height:105px;
    left:10%;
    bottom:5px;
    transform:rotate(-1deg);
}

/* รูปที่ 5 — กลางล่าง */
.svc-collage-5{
    width:135px;
    height:130px;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    transform:rotate(0);
}

/* five finishes */
.svc-finishes{background:#f7f6f3;padding:48px 0 58px}
.svc-finish-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.svc-finish-grid article{border-radius:8px;overflow:hidden;background:#fff;border:1px solid #ddd9d3;box-shadow:0 4px 10px rgba(0,0,0,.06);min-width:0}
.svc-finish-image{height:148px;overflow:hidden}
.svc-finish-image img{width:100%;height:100%;object-fit:cover;display:block}
.svc-finish-copy{position:relative;padding:15px 13px 18px;min-height:135px}
.svc-finish-copy h3{font-size:16px;line-height:1.35;margin:0 0 8px;font-weight:500}
.svc-finish-copy p{font-size:11px;line-height:1.7;margin:0;color:#555}
.svc-dot{position:absolute;right:12px;bottom:9px;font-size:10px;color:#a27a4f;letter-spacing:1px}
.svc-custom{background:#f7f6f3;padding:8px 0 58px}
.svc-custom-grid{display:grid;gap:16px}
.svc-custom-grid article{display:grid;grid-template-columns:310px 1fr;gap:25px;align-items:center}
.svc-custom-grid img{width:100%;height:120px;object-fit:cover;border-radius:8px;display:block}
.svc-custom-grid h3{font-size:19px;margin:0 0 6px}
.svc-custom-grid p{font-size:12px;line-height:1.75;margin:0;color:#5b5956}

/* installation reference */
.svc-install-hero{background:#f8f7f4;padding:42px 0 54px;position:relative}
.svc-install-hero .svc-wrap{position:relative;min-height:360px}
.svc-install-photo{
    position:absolute;
    right:0;
    top:0;
    width:68%;
    height:360px;
    border:1px solid #a48a70;
    padding:8px;
    border-radius:10px
}
.svc-install-photo img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}
.svc-install-card{position:absolute;left:2%;top:48px;width:52%;min-height:245px;background:#fff;border-radius:8px;padding:27px 30px;box-shadow:0 11px 25px rgba(0,0,0,.16);z-index:2}
.svc-install-card:after{content:'';position:absolute;inset:-15px auto 20px -15px;width:calc(100% + 20px);border:1px solid #b79d83;border-radius:11px;z-index:-1}
.svc-install-card h1{font-size:31px;line-height:1.15;margin:0 0 13px;font-weight:600}
.svc-install-card p{font-size:12px;line-height:1.7;color:#4f4b48;margin:0 0 9px;max-width:620px}
.svc-install-card .svc-btn{margin-top:4px}
.svc-install-portfolio{
    background:#e9e0d7;
    padding:54px 0 60px}
.svc-install-gallery{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:260px 260px 260px;
    gap:12px}
.svc-install-gallery figure{
    margin:0;
    background:#fff;
    border-radius:9px;
    overflow:hidden;
    box-shadow:0 5px 12px rgba(0,0,0,.12);
    position:relative}
.svc-install-gallery img{
    width:100%;
    height:calc(100% - 27px);
    object-fit:cover;
    display:block}
.svc-install-gallery figcaption{
    height:27px;
    padding:5px 9px;
    font-size:10px;
    line-height:1.5;
    color:#292725;
    background:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}
.install-1{grid-row:1 / span 2}
.install-2{grid-column:2}
.install-3{grid-column:3}
.install-4{grid-column:2}
.install-5{grid-column:3}
.install-6{grid-column:1}
.install-7{grid-column:2}
.install-8{grid-column:3}

/* shared process / why */
.svc-process{background:#faf9f7;padding:60px 0 72px;position:relative;overflow:hidden}
.svc-process:before,.svc-process:after{content:'';position:absolute;height:1px;background:#c3a78d;opacity:.6;left:0;right:0;top:168px}
.svc-process:after{top:auto;bottom:95px;left:8%;right:42%}
.svc-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.svc-process-grid article{position:relative;min-height:178px;background:#fff;border-radius:18px;padding:31px 22px 20px;box-shadow:0 9px 20px rgba(0,0,0,.14);border:1px solid #e7e2dc}
.svc-process-grid article:last-child:nth-child(4){grid-column:1}
.svc-process-icon{position:absolute;top:16px;left:18px;width:42px;height:42px;border:1px solid #c0a080;border-radius:50%;display:grid;place-items:center;background:#fbf8f3}
.svc-process-icon svg,.svc-why-icon svg{width:25px;height:25px;fill:none;stroke:#a27a4f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-number{position:absolute;top:13px;right:20px;font-size:31px;font-weight:600;color:#1c1b1a}
.svc-process-grid h3{font-size:18px;line-height:1.35;margin:37px 0 8px}
.svc-process-grid p{font-size:11px;line-height:1.75;color:#555;margin:0}
.svc-why{background:#f7f7f6;padding:48px 0 68px}
.svc-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;text-align:center}
.svc-why-grid article{padding:0 18px}
.svc-why-icon{width:58px;height:58px;margin:0 auto 10px;display:grid;place-items:center}
.svc-why-grid h3{font-size:16px;margin:0 0 7px;font-weight:500}
.svc-why-grid p{font-size:11px;line-height:1.7;color:#5d5956;margin:0}

/* polishing and craft share process, but finish/custom sections can be hidden below reference fold on polishing */
.svc-polishing .svc-dark-top{padding-bottom:10px}
.svc-polishing .svc-process{padding-top:58px}
.svc-polishing .svc-process-grid article{min-height:178px}
.svc-polishing .svc-why{padding-top:45px}
.svc-polishing .svc-dark-top + .svc-process{}

@media (max-width:900px){
 .svc-wrap{width:min(100% - 34px,700px)}
 .svc-hero-dark{grid-template-columns:1fr;gap:18px;padding-bottom:25px}
 .svc-hero-photo,.svc-hero-panel{height:270px}
 .svc-panel-content{padding:30px}
 .svc-panel-content h1{font-size:26px}
 .svc-portfolio-dark{grid-template-columns:1fr;padding-top:38px}
 .svc-portfolio-copy{padding-bottom:0}
 .svc-collage{width:100%;height:250px;margin:0 auto}
 .svc-finish-grid{grid-template-columns:repeat(2,1fr)}
 .svc-finish-image{height:170px}
 .svc-custom-grid article{grid-template-columns:1fr;gap:12px}
 .svc-custom-grid img{height:180px}
 .svc-install-hero .svc-wrap{min-height:600px}
 .svc-install-photo{position:absolute;width:100%;height:360px;top:0}
 .svc-install-card{left:4%;top:270px;width:92%;min-height:250px}
 .svc-install-gallery{grid-template-columns:1fr 1fr;grid-template-rows:220px repeat(4,150px)}
 .install-1{grid-column:1 / span 2;grid-row:1}
 .install-2,.install-3,.install-4,.install-5,.install-6,.install-7,.install-8{grid-column:auto;grid-row:auto}
 .svc-process-grid{grid-template-columns:1fr 1fr}
 .svc-process-grid article:last-child:nth-child(4){grid-column:auto}
 .svc-process:before{top:150px}
 .svc-why-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
 .svc-wrap{width:calc(100% - 24px)}
 .svc-dark-top{padding-top:24px}
 .svc-hero-photo{height:210px}
 .svc-hero-panel{height:auto;min-height:300px}
 .svc-panel-content{padding:28px 24px}
 .svc-panel-content h1{font-size:23px}
 .svc-panel-content p{font-size:11px}
 .svc-portfolio-dark{padding-bottom:35px}
 .svc-portfolio-copy h2{font-size:25px}
 .svc-collage{height:220px}
 .svc-collage-1{width:112px;height:88px}.svc-collage-2{width:128px;height:96px}.svc-collage-3{width:112px;height:86px}.svc-collage-4{width:112px;height:85px}.svc-collage-5{width:118px;height:115px}
 .svc-finish-grid{grid-template-columns:1fr;gap:12px}
 .svc-finish-image{height:200px}
 .svc-section-head h2{font-size:27px}
 .svc-install-hero{padding-top:24px}
 .svc-install-hero .svc-wrap{min-height:585px}
 .svc-install-photo{height:300px}
 .svc-install-card{top:235px;padding:23px 20px}
 .svc-install-card h1{font-size:25px}
 .svc-install-gallery{grid-template-columns:1fr;grid-template-rows:auto}
 .svc-install-gallery figure{height:180px;grid-column:auto!important;grid-row:auto!important}
 .svc-process-grid{grid-template-columns:1fr;gap:16px}
 .svc-process:before,.svc-process:after{display:none}
 .svc-process-grid article{min-height:155px}
 .svc-process-grid h3{font-size:17px}
}


/* =========================================================
   SERVICE DETAIL — PORTRAIT TABLET / MOBILE
   Keep the same horizontal composition as landscape/desktop.
   Scoped ONLY to service-detail.html; header/footer untouched.
   ========================================================= */
@media (min-width:561px) and (max-width:1024px){
  body.service-detail-page .svc-wrap{width:calc(100% - 32px);max-width:none}
  body.service-detail-page .svc-dark-top{padding:28px 0 0}
  body.service-detail-page .svc-hero-dark{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:0;padding-bottom:22px}
  body.service-detail-page .svc-hero-photo,
  body.service-detail-page .svc-hero-panel{height:245px;min-width:0}
  body.service-detail-page .svc-panel-content{padding:20px 22px;border-radius:105px 105px 0 0}
  body.service-detail-page .svc-panel-content h1{font-size:22px;line-height:1.25;margin-bottom:9px}
  body.service-detail-page .svc-panel-content p{font-size:9px;line-height:1.55;margin-bottom:7px}
  body.service-detail-page .svc-eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:5px}
  body.service-detail-page .svc-btn{min-width:100px;padding:7px 12px;font-size:9px}
  body.service-detail-page .svc-portfolio-dark{grid-template-columns:minmax(0,40%) minmax(0,60%);gap:12px;padding:35px 0 30px;min-height:250px}
  body.service-detail-page .svc-portfolio-copy{padding:0;min-width:0}
  body.service-detail-page .svc-portfolio-copy h2{font-size:22px;line-height:1.2;margin-bottom:7px}
  body.service-detail-page .svc-portfolio-copy p{font-size:9px;line-height:1.55;margin-bottom:7px}
  body.service-detail-page .svc-portfolio-copy .svc-small-copy{font-size:8px}
  body.service-detail-page .svc-collage{height:220px;min-width:0}
  body.service-detail-page .svc-collage-1{width:112px;height:86px}
  body.service-detail-page .svc-collage-2{width:132px;height:98px}
  body.service-detail-page .svc-collage-3{width:118px;height:88px}
  body.service-detail-page .svc-collage-4{width:112px;height:86px}
  body.service-detail-page .svc-collage-5{width:120px;height:112px}

  body.service-detail-page .svc-finishes{padding:34px 0 38px}
  body.service-detail-page .svc-section-head{margin-bottom:18px}
  body.service-detail-page .svc-section-head h2{font-size:25px;line-height:1.2}
  body.service-detail-page .svc-section-head p{font-size:9px;line-height:1.55}
  body.service-detail-page .svc-finish-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  body.service-detail-page .svc-finish-image{height:105px}
  body.service-detail-page .svc-finish-copy{padding:9px 7px 12px;min-height:92px}
  body.service-detail-page .svc-finish-copy h3{font-size:10px;line-height:1.25;margin-bottom:5px}
  body.service-detail-page .svc-finish-copy p{font-size:7px;line-height:1.45}
  body.service-detail-page .svc-dot{right:6px;bottom:5px;font-size:7px}
  body.service-detail-page .svc-custom{padding:4px 0 38px}
  body.service-detail-page .svc-custom-grid{gap:9px}
  body.service-detail-page .svc-custom-grid article{grid-template-columns:38% 62%;gap:12px}
  body.service-detail-page .svc-custom-grid img{height:82px}
  body.service-detail-page .svc-custom-grid h3{font-size:13px;margin-bottom:4px}
  body.service-detail-page .svc-custom-grid p{font-size:8px;line-height:1.5}

  body.service-detail-page .svc-install-hero{padding:28px 0 32px}
  body.service-detail-page .svc-install-hero .svc-wrap{min-height:275px}
  body.service-detail-page .svc-install-photo{width:56%;height:250px;right:0;top:0;padding:6px}
  body.service-detail-page .svc-install-card{left:2%;top:35px;width:51%;min-height:190px;padding:20px 22px}
  body.service-detail-page .svc-install-card:after{inset:-10px auto 12px -10px}
  body.service-detail-page .svc-install-card h1{font-size:22px;line-height:1.12;margin-bottom:8px}
  body.service-detail-page .svc-install-card p{font-size:8px;line-height:1.5;margin-bottom:6px}
  body.service-detail-page .svc-install-portfolio{padding:34px 0 38px}
  body.service-detail-page .svc-install-gallery{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:105px 105px 88px;gap:7px}
  body.service-detail-page .svc-install-gallery figcaption{height:20px;padding:3px 5px;font-size:7px}
  body.service-detail-page .svc-install-gallery img{height:calc(100% - 20px)}

  body.service-detail-page .svc-process{padding:38px 0 45px}
  body.service-detail-page .svc-process:before{top:118px}
  body.service-detail-page .svc-process:after{bottom:60px}
  body.service-detail-page .svc-process-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  body.service-detail-page .svc-process-grid article{min-height:125px;padding:24px 12px 12px;border-radius:13px}
  body.service-detail-page .svc-process-icon{top:9px;left:10px;width:28px;height:28px}
  body.service-detail-page .svc-process-icon svg{width:17px;height:17px}
  body.service-detail-page .svc-number{top:8px;right:10px;font-size:21px}
  body.service-detail-page .svc-process-grid h3{font-size:11px;line-height:1.25;margin:27px 0 5px}
  body.service-detail-page .svc-process-grid p{font-size:7px;line-height:1.5}
  body.service-detail-page .svc-why{padding:32px 0 42px}
  body.service-detail-page .svc-why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  body.service-detail-page .svc-why-grid article{padding:0 5px}
  body.service-detail-page .svc-why-icon{width:40px;height:40px;margin-bottom:6px}
  body.service-detail-page .svc-why-icon svg{width:20px;height:20px}
  body.service-detail-page .svc-why-grid h3{font-size:10px;margin-bottom:4px}
  body.service-detail-page .svc-why-grid p{font-size:7px;line-height:1.45}
}

@media (max-width:560px){
  /* Portrait phone: retain horizontal/desktop composition, only scale it down. */
  body.service-detail-page .svc-wrap{width:calc(100% - 18px);max-width:none}
  body.service-detail-page .svc-dark-top{padding:18px 0 0}
  body.service-detail-page .svc-hero-dark{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;padding-bottom:16px;min-height:0}
  body.service-detail-page .svc-hero-photo,
  body.service-detail-page .svc-hero-panel{height:175px}
  body.service-detail-page .svc-panel-content{padding:13px 12px;border-radius:78px 78px 0 0}
  body.service-detail-page .svc-panel-content h1{font-size:13px;line-height:1.2;margin-bottom:5px}
  body.service-detail-page .svc-panel-content p{font-size:6.5px;line-height:1.42;margin-bottom:4px}
  body.service-detail-page .svc-panel-content .svc-btn{margin-top:0}
  body.service-detail-page .svc-eyebrow{font-size:6px;letter-spacing:1px;margin-bottom:3px}
  body.service-detail-page .svc-btn{min-width:68px;padding:5px 7px;font-size:6.5px;border-radius:14px}
  body.service-detail-page .svc-portfolio-dark{grid-template-columns:minmax(0,40%) minmax(0,60%);gap:7px;padding:22px 0 20px;min-height:190px}
  body.service-detail-page .svc-portfolio-copy{padding:0}
  body.service-detail-page .svc-portfolio-copy h2{font-size:13px;line-height:1.2;margin-bottom:5px}
  body.service-detail-page .svc-portfolio-copy p{font-size:6.5px;line-height:1.42;margin-bottom:5px}
  body.service-detail-page .svc-portfolio-copy .svc-small-copy{font-size:6px}
  body.service-detail-page .svc-collage{height:160px}
  body.service-detail-page .svc-collage figure{border-width:2px;border-radius:10px}
  body.service-detail-page .svc-collage-1{width:78px;height:60px;left:1%;top:24px}
  body.service-detail-page .svc-collage-2{width:91px;height:67px;left:29%;top:0}
  body.service-detail-page .svc-collage-3{width:82px;height:62px;right:0;top:20px}
  body.service-detail-page .svc-collage-4{width:78px;height:60px;left:1%;bottom:4px}
  body.service-detail-page .svc-collage-5{width:82px;height:78px;left:31%;bottom:0}

  body.service-detail-page .svc-finishes{padding:22px 0 25px}
  body.service-detail-page .svc-section-head{margin-bottom:12px}
  body.service-detail-page .svc-section-head h2{font-size:15px;line-height:1.2;margin-bottom:4px}
  body.service-detail-page .svc-section-head p{font-size:6.5px;line-height:1.4}
  body.service-detail-page .svc-finish-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  body.service-detail-page .svc-finish-grid article{border-radius:5px}
  body.service-detail-page .svc-finish-image{height:62px}
  body.service-detail-page .svc-finish-copy{padding:5px 4px 8px;min-height:70px}
  body.service-detail-page .svc-finish-copy h3{font-size:6.5px;line-height:1.2;margin-bottom:3px}
  body.service-detail-page .svc-finish-copy p{font-size:4.8px;line-height:1.35}
  body.service-detail-page .svc-dot{right:3px;bottom:2px;font-size:5px}
  body.service-detail-page .svc-custom{padding:2px 0 25px}
  body.service-detail-page .svc-custom-grid{gap:6px}
  body.service-detail-page .svc-custom-grid article{grid-template-columns:38% 62%;gap:7px}
  body.service-detail-page .svc-custom-grid img{height:58px;border-radius:5px}
  body.service-detail-page .svc-custom-grid h3{font-size:8px;margin-bottom:2px;line-height:1.2}
  body.service-detail-page .svc-custom-grid p{font-size:5.5px;line-height:1.4}

  body.service-detail-page .svc-install-hero{padding:18px 0 20px}
  body.service-detail-page .svc-install-hero .svc-wrap{min-height:195px}
  body.service-detail-page .svc-install-photo{width:57%;height:175px;right:0;top:0;padding:4px;border-radius:6px}
  body.service-detail-page .svc-install-card{left:1%;top:25px;width:51%;min-height:125px;padding:12px 11px;border-radius:6px}
  body.service-detail-page .svc-install-card:after{inset:-6px auto 8px -6px;border-radius:7px}
  body.service-detail-page .svc-install-card h1{font-size:13px;line-height:1.08;margin-bottom:5px}
  body.service-detail-page .svc-install-card p{font-size:5.8px;line-height:1.38;margin-bottom:4px}
  body.service-detail-page .svc-install-portfolio{padding:22px 0 25px}
  body.service-detail-page .svc-install-gallery{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:72px 72px 58px;gap:4px}
  body.service-detail-page .svc-install-gallery figure{border-radius:5px}
  body.service-detail-page .svc-install-gallery figcaption{height:13px;padding:2px 3px;font-size:4.8px;line-height:1.2}
  body.service-detail-page .svc-install-gallery img{height:calc(100% - 13px)}

  body.service-detail-page .svc-process{padding:24px 0 28px}
  body.service-detail-page .svc-process:before{top:82px}
  body.service-detail-page .svc-process:after{bottom:40px}
  body.service-detail-page .svc-process-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  body.service-detail-page .svc-process-grid article{min-height:92px;padding:18px 6px 7px;border-radius:9px}
  body.service-detail-page .svc-process-icon{top:6px;left:6px;width:20px;height:20px}
  body.service-detail-page .svc-process-icon svg{width:12px;height:12px}
  body.service-detail-page .svc-number{top:4px;right:6px;font-size:14px}
  body.service-detail-page .svc-process-grid h3{font-size:7px;line-height:1.18;margin:20px 0 3px}
  body.service-detail-page .svc-process-grid p{font-size:4.8px;line-height:1.35}
  body.service-detail-page .svc-why{padding:22px 0 28px}
  body.service-detail-page .svc-why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  body.service-detail-page .svc-why-grid article{padding:0 2px}
  body.service-detail-page .svc-why-icon{width:28px;height:28px;margin-bottom:3px}
  body.service-detail-page .svc-why-icon svg{width:14px;height:14px}
  body.service-detail-page .svc-why-grid h3{font-size:6.5px;margin-bottom:2px}
  body.service-detail-page .svc-why-grid p{font-size:4.7px;line-height:1.35}
}

/* =========================================================
   SERVICE IMAGE LIGHTBOX — content images only
   ========================================================= */
body.service-detail-page .svc-main img{cursor:zoom-in}
.svc-lightbox{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(8,12,16,.92);backdrop-filter:blur(3px)}
.svc-lightbox.is-open{display:flex}
.svc-lightbox-image{display:block;max-width:min(94vw,1400px);max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 18px 60px rgba(0,0,0,.45);cursor:default}
.svc-lightbox-close{position:absolute;top:14px;right:18px;width:44px;height:44px;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font:300 30px/40px Arial,sans-serif;text-align:center;cursor:pointer;z-index:2}
.svc-lightbox-close:hover{background:rgba(255,255,255,.14)}
body.svc-lightbox-open{overflow:hidden}
@media (max-width:560px){
 .svc-lightbox{padding:14px}
 .svc-lightbox-image{max-width:96vw;max-height:82vh}
 .svc-lightbox-close{top:8px;right:8px;width:36px;height:36px;font-size:24px;line-height:32px}
}


/* =========================================================
   USER REQUESTED SERVICE DETAIL LAYOUT FIXES
   Only the requested sections are changed.
========================================================= */

/* 1) Polishing — desktop + iPad: cleaner gallery, no heavy overlap.
   Mobile keeps the existing collage unchanged. */
@media (min-width:561px){
  body.service-detail-page .svc-polishing .svc-collage{
    height:360px;
    max-width:620px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-left:auto;
  }
  body.service-detail-page .svc-polishing .svc-collage figure{
    position:relative;
    inset:auto;
    width:auto;
    height:auto;
    transform:none;
    border-width:2px;
    border-radius:14px;
  }
  body.service-detail-page .svc-polishing .svc-collage-1{grid-column:1;grid-row:1;}
  body.service-detail-page .svc-polishing .svc-collage-2{grid-column:2;grid-row:1;}
  body.service-detail-page .svc-polishing .svc-collage-3{grid-column:3;grid-row:1;}
  body.service-detail-page .svc-polishing .svc-collage-4{grid-column:1 / span 2;grid-row:2;}
  body.service-detail-page .svc-polishing .svc-collage-5{grid-column:3;grid-row:2;}
}

/* 2) Stone finishes — computer only: slightly larger image frames,
   while keeping all 5 cards in one row. */
@media (min-width:1101px){
  body.service-detail-page .svc-craft .svc-finish-grid{
    gap:14px;
  }
  body.service-detail-page .svc-craft .svc-finish-image{
    height:180px;
  }
  body.service-detail-page .svc-craft .svc-finish-copy{
    min-height:145px;
    padding:16px 14px 19px;
  }
}

/* 3) Custom fabrication — computer + iPad: larger image/frame,
   with safe flexible widths so nothing can overflow. */
@media (min-width:561px){
  body.service-detail-page .svc-craft .svc-custom-grid article{
    grid-template-columns:minmax(0,48%) minmax(0,52%);
    gap:28px;
  }
  body.service-detail-page .svc-craft .svc-custom-grid img{
    width:100%;
    height:240px;
    border:3px solid #d4c5b7;
    border-radius:12px;
    object-fit:cover;
    box-sizing:border-box;
  }
  body.service-detail-page .svc-craft .svc-custom-grid h3{
    font-size:22px;
    line-height:1.35;
  }
  body.service-detail-page .svc-craft .svc-custom-grid p{
    font-size:13px;
    line-height:1.8;
  }
}

/* 4) Installation — keep the desktop composition on iPad and phone
   (3 cards across, then 2 centered), but scale safely to the viewport.
   No horizontal overflow. */
body.service-detail-page .svc-install-process-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
}
body.service-detail-page .svc-install-step:nth-child(-n+3){grid-column:span 2;}
body.service-detail-page .svc-install-step:nth-child(4){grid-column:2 / span 2;}
body.service-detail-page .svc-install-step:nth-child(5){grid-column:4 / span 2;}

@media (min-width:561px) and (max-width:1100px){
  body.service-detail-page .svc-install-process-grid{
    gap:12px;
  }
  body.service-detail-page .svc-install-step{
    padding:10px 9px 14px;
  }
  body.service-detail-page .svc-install-step-content h3{
    font-size:18px;
    padding-right:40px;
  }
  body.service-detail-page .svc-install-step-content p{
    font-size:12px;
    line-height:1.5;
  }
  body.service-detail-page .svc-install-step-image{
    height:150px;
  }
  body.service-detail-page .svc-install-step-number{
    font-size:30px;
  }
}

@media (max-width:560px){
  body.service-detail-page .svc-install-process-grid{
    gap:5px;
  }
  body.service-detail-page .svc-install-step{
    padding:7px 5px 10px;
  }
  body.service-detail-page .svc-install-step-content h3{
    font-size:7px;
    padding-right:25px;
  }
  body.service-detail-page .svc-install-step-content p{
    font-size:4.8px;
  }
  body.service-detail-page .svc-install-step-image{
    height:72px;
  }
  body.service-detail-page .svc-install-step-number{
    font-size:14px;
  }
}

/* Global overflow guard for the service-detail page only. */
body.service-detail-page,
body.service-detail-page .svc-main{
  max-width:100%;
  overflow-x:hidden;
}