/* ============================================================
   LAMINATES & PRODUCT DETAIL PAGE STYLING
   ============================================================ */

/* Main Section Wrapper */
.product-page-hero {
    /* Using clamp for padding ensures breathing room on all screen sizes */
    padding: clamp(20px, 5vw, 60px) 7% clamp(40px, 8vw, 80px) 7%;
    background-color: #fff;
    margin-top: 0px;
}

/* Page Header Typography */
.product-header {
    text-align: center;
    margin-bottom: clamp(30px, 5vw, 50px);
}

.page-title {
    /* Fluid typography: min 2.5rem, grows with screen, max 4.5rem */
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--primary-green);
    letter-spacing: clamp(2px, 0.5vw, 5px);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.page-subtitle {
    color: #888;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    letter-spacing: 1px;
}

/* Product Detail Container - The Responsive Layout */
.product-detail-container {
    display: flex;
    flex-wrap: wrap; /* Allows image and text to stack on mobile */
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 5vw, 60px);
    background: var(--bg-light); /* The tan color from homepage */
    padding: clamp(25px, 5%, 50px);
    border-radius: 40px;
    
    /* Responsive curve: prevents the 200px curve from looking weird on small phones */
    border-top-right-radius: clamp(60px, 15vw, 200px); 
    
    max-width: 1300px;
    margin: 0 auto; /* Centers the container on wide screens */
}

/* Image Column */
.product-detail-image {
    flex: 1 1 400px; /* Grow, shrink, and a basis of 400px */
    width: 100%;
}

.product-detail-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 15px 15px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.product-detail-image img:hover {
    transform: scale(1.02); /* Subtle UX feedback on hover */
}

/* Text Content Column */
.product-detail-text {
    flex: 1 1 400px;
    width: 100%;
}

.product-detail-text h3 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    color: var(--primary-green);
    margin-bottom: 20px;
}

.product-detail-text p {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Features List Styling */
.product-features {
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-green);
}

.feature i {
    color: #a67c52; /* Gold/Wood tone icon color */
    font-size: 1.3rem;
}

/* ============================================================
   SEAMLESS UX BREAKPOINTS (Mobile & Tablet)
   ============================================================ */

/* Tablet and below (iPad/Large Phones) */
@media (max-width: 992px) {
    .product-detail-container {
        border-top-right-radius: 100px; /* Soften the curve for tablets */
    }
}

/* Mobile Phones (iPhone/Android) */
@media (max-width: 768px) {
    .product-page-hero {
        padding: 20px 5%;
    }

    .product-detail-container {
        padding: 35px 20px;
        border-top-right-radius: 60px; /* Subtle curve for mobile screens */
        text-align: center; /* Better readability for mobile users */
    }

    .feature {
        justify-content: center; /* Center icons/text on mobile */
    }

    /* Make buttons full-width on mobile for better thumb-reach (UX rule) */
    .btn-quote {
        width: 100%;
        display: block;
        padding: 15px 0;
    }
    
    .product-detail-text p {
        text-align: center; /* Standardize text flow on phones */
    }
}

/* Extra Small Devices */
@media (max-width: 480px) {
    .page-title {
        letter-spacing: 2px;
    }
}