/* ==========================================================================
   NEW PRODUCT DETAIL SECTIONS (GLASS, TEXTURE, HARDWARE)
   ========================================================================== */

/* --- Glass Options Section (Two-Column Layout) --- */
.glass-options-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.glass-images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.glass-images img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.glass-specs ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.glass-specs li {
    font-size: 1rem;
    color: #495057;
    line-height: 1.7;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

/* Custom bullet points using your brand color */
.glass-specs li::before {
    content: "•";
    color: #e91e63; /* Your accent pink/purple */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- Glass Texture Section (Grid of Circles) --- */
.texture-grid {
    display: grid;
    /* Responsive grid: fills space, with a minimum item width of 120px */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.texture-item {
    text-align: center;
}

.texture-image-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden; /* This creates the circular crop */
    margin: 0 auto 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-out;
}
.texture-image-wrapper:hover {
    transform: scale(1.05);
}

.texture-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the circle without distortion */
}

.texture-item p {
    font-weight: 500;
    color: #374151;
    margin: 0;
}

/* --- Hardware Section --- */
.hardware-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 3rem;
}

.hardware-showcase-grid img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Important for showing full hardware without crop */
    border-radius: 8px;
}

.accessories-options {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}
.accessories-options h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.accessories-options ul {
    /* Re-use the same style as glass specs */
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.accessories-options li {
    font-size: 1rem;
    color: #495057;
    line-height: 1.7;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}
.accessories-options li::before {
    content: "•";
    color: #e91e63;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

/* ======================================================
   RESPONSIVE ADJUSTMENTS FOR NEW SECTIONS
   ====================================================== */

@media (max-width: 992px) {
    /* Stack the two-column layouts on tablets */
    .glass-options-layout,
    .hardware-showcase-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .texture-grid {
        /* Adjust for smaller screens */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 1.5rem;
    }
    .texture-image-wrapper {
        width: 100px;
        height: 100px;
    }
}

/* ==========================================================================
   CSS-GENERATED GLASS TEXTURE STYLES
   ========================================================================== */

.texture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.texture-item {
    text-align: center;
}

/* Base style for ALL glass samples */
.texture-image-wrapper {
    /* Set the common background image here */
    background-image: url(../img/glass.jpg);
    background-size: cover;
    background-position: center;

    /* Layout and shape */
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Make it a circle */
    margin: 0 auto 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid #fff; /* Adds a nice edge */
    position: relative; /* Crucial for pseudo-element overlays */
    overflow: hidden; /* Ensures effects stay within the circle */
}

.texture-item p {
    font-weight: 500;
    color: #374151;
    margin: 0;
}

/* === Individual Texture Effects using Pseudo-Elements === */

/* The ::before pseudo-element acts as our glass overlay */
.texture-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    pointer-events: none; /* Allows hovering over the main element */
}

/* 1. Obscure / Frosted Glass */
.obscure::before {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}

/* 2. Reeded / Fluted Glass */
.reeded::before {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(0, 0, 0, 0.05) 50%
    );
    background-size: 14px 100%;
    backdrop-filter: blur(2px);
}

/* 3. Narrow Reeded Glass */
.narrow-reeded::before {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(0, 0, 0, 0.05) 50%
    );
    background-size: 8px 100%;
    backdrop-filter: blur(1px);
}

/* 4. Rain Glass */
.rain::before {
    background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0) 48%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 52%
    );
    background-size: 100% 8px;
    backdrop-filter: blur(2px) saturate(110%);
}

/* 5. Hamered / Stippled Glass */
.hamered::before {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.1) 2px,
        transparent 2px
    );
    background-size: 15px 15px;
    backdrop-filter: blur(1.5px);
}

/* 6. V-Groove Glass */
.v-groove::before {
    background: linear-gradient(
            45deg,
            transparent 49%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 51%
        ),
        linear-gradient(
            -45deg,
            transparent 49%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 51%
        );
    background-size: 100% 100%;
}

/* 7. Casci / Grid Glass */
.casci::before {
    background: linear-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
    background-size: 20px 20px;
    backdrop-filter: blur(0.5px);
}

/* 8. Flemish / Wavy Glass */
.flemish::before {
    backdrop-filter: blur(1px) contrast(1.2) brightness(1.1);
}

/* 9. Glue Chip / Crystalline Glass */
.glue-chip::before {
    backdrop-filter: blur(0.5px) saturate(130%) contrast(1.3);
}

/* 10. Aquatex / Renova / Florex - General "noisy" textures */
.aquatex::before,
.renova::before,
.florex::before {
    backdrop-filter: blur(3px) contrast(1.1) saturate(1.1);
}

/* ==========================================================================
   ENHANCED COLOR & COATING OPTIONS SECTION
   ========================================================================== */
.color-options-container {
    margin-top: 2rem;
}

/* --- Tab Navigation --- */
.color-tabs {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 2rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #495057;
    transform: translateY(2px); /* Aligns with the main border */
    transition: all 0.2s ease-in-out;
}

.tab-btn:hover {
    color: #212529;
}

.tab-btn.active {
    color: #3a2616; /* Your primary dark brown */
    border-bottom-color: #3a2616;
}

/* --- Tab Panels --- */
.color-panels .color-panel {
    display: none; /* Hide panels by default */
}
.color-panels .color-panel.active {
    display: block; /* Show the active one */
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-intro {
    font-size: 1rem;
    color: #495057;
    margin-bottom: 2rem;
    max-width: 800px;
}

/* --- Swatch Styling --- */
.finish-swatches {
    display: grid;
    /* Responsive grid for swatches */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1.5rem;
}

.swatch-item {
    text-align: center;
}

.swatch-color {
    width: 100%;
    height: 100px; /* Rectangular swatches */
    border-radius: 6px;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
    cursor: pointer;
}
.swatch-color:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.swatch-name {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}
.swatch-sheen {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
}

.color-category {
    margin-bottom: 3rem;
}
.color-category h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

/* --- RAL Custom Promo --- */
.ral-promo {
    margin-top: 4rem;
    background-color: #fdfaff; /* Your light pinkish off-white */
    border-radius: 12px;
    padding: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.ral-promo img {
    max-width: 100%;
    border-radius: 8px;
}
.ral-promo-text h3 {
    font-size: 1.5rem;
    color: #3a2616;
}
.ral-promo-text p {
    color: #495057;
    line-height: 1.7;
    margin-bottom: 2rem;
}
.btn-quote {
    /* Re-using style from previous example */
    display: inline-block;
    background-color: #e91e63;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
}

/* --- Disclaimer --- */
.color-disclaimer {
    margin-top: 3rem;
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    border-left: 4px solid #e91e63; /* Your accent pink */
    font-size: 0.9rem;
    color: #495057;
}

/* Special swatch for wood grains */
.wood-grain-swatch {
    background: linear-gradient(
        to right,
        var(--c1, #8b5a2b),
        var(--c2, #744a22)
    );
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .ral-promo {
        grid-template-columns: 1fr; /* Stack on tablets */
        text-align: center;
    }
}

.glass-texture-section {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 35px 25px;
    margin-bottom: 2rem;
}