/**
 * Himpel Master Styling (v6.0 Final) - Fix Duplicate Gallery & Match Himpel Screenshot
 */

/* ==========================================================================
   1. GALLERY FIX (NO DUPLICATION)
   ========================================================================== */

/* Flatsome's product gallery usually contains a main slider and a thumb slider.
   If duplication occurs, we ensure only the standard container is visible and styled. */

.product-gallery {
    margin-bottom: 2rem;
    position: relative;
}

/* Force Vertical Thumbnails on the left like Himpel (PC only) */
@media (min-width: 850px) {
    .product-page .row>.col:first-child {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: flex-start !important;
    }

    .product-gallery {
        flex: 1;
        margin-bottom: 0 !important;
    }

    /* Thumbnail Container */
    .flex-control-thumbs {
        width: 80px !important;
        margin: 0 15px 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .flex-control-thumbs li {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    .flex-control-thumbs li img {
        border-radius: 4px;
        border: 1px solid #eee !important;
        transition: all 0.3s ease;
    }

    .flex-control-thumbs li.flex-active img,
    .flex-control-thumbs li img:hover {
        border-color: #4caf50 !important;
        filter: brightness(0.9);
    }
}

/* Hide any stray duplicates that might be injected by WooCommerce hooks */
.woocommerce-product-gallery--with-images+.woocommerce-product-gallery--with-images {
    display: none !important;
}

/* ==========================================================================
   2. PRODUCT INFO & HIMPEL HIGHLIGHT BOX
   ========================================================================== */

.product-page .product_title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #222 !important;
    line-height: 1.2 !important;
}

.product-page .price {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #4caf50 !important;
    margin: 1rem 0 !important;
}

/* The Cream/Yellow Box from Screenshot */
.product-page section[bg_color="rgb(255, 251, 240)"] {
    background-color: #fffbf0 !important;
    border: 1px solid #ffe699 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.product-page section[bg_color="rgb(255, 251, 240)"] p {
    margin-bottom: 5px !important;
    line-height: 1.4 !important;
    color: #555 !important;
}

/* Hotline Box */
.product-page section[bg_color="rgb(76, 175, 80)"] {
    background-color: #4caf50 !important;
    border-radius: 8px !important;
    margin-top: 15px !important;
}

/* ==========================================================================
   3. CTA BUTTONS & TABS
   ========================================================================== */

.product-page button.single_add_to_cart_button {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    padding: 0 30px !important;
    height: 50px !important;
}

.product-page button.single_add_to_cart_button:hover {
    background-color: #43a047 !important;
}

/* Tabs Underline Style */
.product-page .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #f1f1f1 !important;
    background: transparent !important;
}

.product-page .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
}

.product-page .woocommerce-tabs ul.tabs li a {
    color: #666 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid transparent !important;
}

.product-page .woocommerce-tabs ul.tabs li.active a {
    color: #4caf50 !important;
    border-bottom-color: #4caf50 !important;
}

/* Specs Table */
.shop_attributes th {
    background: #f9f9f9 !important;
    text-align: left !important;
    padding: 12px 15px !important;
    font-weight: 700 !important;
}

.shop_attributes td {
    padding: 12px 15px !important;
}