/* ========================= */
/* GENERAL */
/* ========================= */

.single-product .et_pb_module_heading {
    visibility: hidden;
    font-size: 1px;
}

.simple-product-container {
    margin: 0 auto 50px;
    display: flex;
    gap: 40px;
    padding-bottom: 40px;
}

.gallery-sticky {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.swiper-slide {
    border: 2px solid #ddd;
    border-radius: 8px;
}

.thumbSwiper .swiper-slide {
    border: 0;
    width: 80px !important;
}

.zoom-img {
    width: 100%;
    border-radius: 8px;
    cursor: zoom-in;
}

.thumb-img {
    height: 80px;
    width: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #ddd;
    cursor: pointer;
}

/* ========================= */
/* LIGHTBOX */
/* ========================= */

#lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

#lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
}

#lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* ========================= */
/* TABS */
/* ========================= */

.tabs-prod {
    border-bottom: 1px solid #ddd;
    padding: 10px 0 0;
}

.tabs-prod .tabs {
    border-bottom: 1px solid #ddd;
}

.tabs-prod .tabs.active {
    border-bottom: 1px solid #414141;
}

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

.wa-btn {
    margin-top: 25px;
    display: inline-block;
    padding: 14px 22px;
    background: #25D366;
    color: white !important;
    font-size: 18px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
}

/* ========================= */
/* RELATED PRODUCTS */
/* ========================= */

.related-grid {
    margin-top: 35px;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2,1fr);
}

@media(min-width:768px){
    .related-grid { grid-template-columns: repeat(3,1fr); }
}

@media(min-width:1024px){
    .related-grid { grid-template-columns: repeat(6,1fr); }
}

.related-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 8px;
    text-decoration: none;
    color: #111;
    transition: .25s;
}

.related-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.related-card img {
    width: 100%;
    height: 160px;
    border-radius: 6px;
    object-fit: cover;
}

.related-title {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}

.related-price {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 700;
}

/* ========================= */
/* FEATURED IMAGE */
/* ========================= */

.featured-image-wrapper {
    height: 500px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    margin: 30px 60px 60px;
    border-radius: 20px;
}

/* ========================= */
/* COLOR SYSTEM */
/* ========================= */

.color-wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.color-column {
    flex: 1;
    min-width: 250px;
}

.color-title {
    margin-bottom: 20px;
    color: #333;
}

.color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.color-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.color-name {
    font-size: 12px;
}

.color-box {
    width: 100px;
    height: 50px;
    border-radius: 7px;
    box-shadow: 2px 2px 5px #8f8f8f;
    background-size: cover;
    background-position: center;
}

.color-box::after {
    content: "";
    position: absolute;
    background-image: url(/projects/norfet/wp-content/plugins/produk-catalog/assets/img/carbon_ash.png);
    background-size: cover;
    background-repeat: repeat;
    opacity: 0.2;
    mix-blend-mode: darken;
    pointer-events: none;
    width: inherit;
    height: 50px;
    border-radius: 5px;
}

/* ========================= */
/* COLOR MAPPING */
/* ========================= */

.color-item.carbon_ash .color-box { background: #898886; }
.color-item.jupiter_coffe .color-box { background: #2E221D; }
.color-item.skin_white .color-box { background: #F4F5EF; }
.color-item.elite_coffe .color-box { background: #47362D; }
.color-item.champagne_grey .color-box { background: #D5C9C2; }
.color-item.mouse_black .color-box { background: #222; }
.color-item.planting_ash .color-box { background: #c9c0bd; }
.color-item.planting_black .color-box { background: #0e0e0e; }
.color-item.copper_ash .color-box { background: #2f3636; }
.color-item.metal_coffee .color-box { background: #453126; }
.color-item.dark_grey .color-box { background: #414141; }
.color-item.metallic_gray .color-box { background: #8b8b85; }
.color-item.planting_gray .color-box { background: #b4b1a3; }
.color-item.elegant_white .color-box { background: #eff5f0; }

.color-item.lime_sand_mortar .color-box {
    background:
    radial-gradient(#555556 0.1px, #4e4e50 1px, #424247 2px),
    linear-gradient(145deg, #4c4c4f, #4a4a4e);
}

.color-item.sand_coffee .color-box {
    background:
    radial-gradient(#837675 0px, #584949 1px, #625151 2px),
    linear-gradient(145deg, #5a4741, #3a2e2a);
}

.color-item.starry_sky_grey .color-box {
    background:
    radial-gradient(#777 0px, #777 1px, #888 2px),
    linear-gradient(45deg, #666, #777 2px, #888 3px);
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 1024px) {
    .simple-product-container {
        flex-direction: column;
        gap: 30px;
        padding: 0 15px;
    }

    .gallery-sticky,
    .simple-product-container > div {
        width: 100% !important;
    }

    .gallery-sticky {
        position: static;
    }

    .thumbSwiper .swiper-slide,
    .thumb-img {
        width: 70px !important;
        height: 70px !important;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 30px !important; }

    .wa-btn {
        text-align: center;
        font-size: 16px;
        padding: 12px 18px;
    }

    .color-wrapper {
        flex-direction: column;
    }

    .related-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 480px) {
    .color-box {
        width: 80px;
    }
    .featured-image-wrapper {
    height: 300px;
    margin: 0px 0px 50px;
    border-radius: 0;
    }
    .pk-grid {
    padding: 0;
    }
}