.btn-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 120px;
    padding: 6px 12px;
    border: 1.5px solid #dcdcdc !important;
    border-radius: 12px;
    background: #ffffff !important;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.btn-logo:hover {
    border-color: #0ebd66 !important;
    transform: translateY(-3px);
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(14, 189, 102, 0.12);
}

.btn-logo:active {
    transform: translateY(-1px);
}

.btn-logo .logo-img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.3s ease;
}

.btn-logo:hover .logo-img {
    transform: scale(1.08);
}

            .product-title-underline {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: -12px;
                margin-bottom: 20px;
            }

            .underline-bar {
                height: 2px;
                width: 60px;
                background: linear-gradient(90deg, #e8143c, #ff6b6b);
                border-radius: 2px;
            }

            .underline-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #e8143c;
                flex-shrink: 0;
            }

            .thumbnail-card:hover {
                border-color: #0ebd66;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.08);
            }
            .thumbnail-card.active {
                border-color: #0ebd66 !important;
                box-shadow: 0 4px 10px rgba(14, 189, 102, 0.15) !important;
            }

            /* Main Canvas Styles */
            .product-details__canvas-container {
                background: #ffffff;
                border: 1.5px solid rgba(14, 165, 233, 0.45);
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(14, 165, 233, 0.15), 0 0 15px rgba(14, 165, 233, 0.08);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 450px;
                width: 100%;
                overflow: hidden;
                padding: 20px;
                margin-bottom: 16px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .product-details__canvas-container:hover {
                border-color: rgba(14, 165, 233, 0.7);
                box-shadow: 0 15px 35px rgba(14, 165, 233, 0.25), 0 0 25px rgba(14, 165, 233, 0.15);
                transform: translateY(-2px);
            }

            .product-details__canvas-container img {
                max-height: 100% !important;
                max-width: 100% !important;
                width: auto !important;
                height: auto !important;
                object-fit: contain !important;
                border-radius: 8px;
                box-shadow: none !important;
                animation: none !important;
                transition: opacity 0.2s ease, transform 0.3s ease;
            }

            @media (max-width: 768px) {
                .product-details__canvas-container {
                    height: 320px;
                }
            }

/* General Section Styling */
            .product-details {
                padding: 80px 0;
                background-color: #f8f9fa;
            }

            /* Image Section */
            .product-details__image-wrapper {
                position: relative;
                display: block;
                width: 100%;
                animation: fadeIn 1.5s ease-in-out;
                z-index: 2;
            }

            .product-details__image {
                max-width: 100%;
                border-radius: 10px;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                animation: float 3s infinite;
            }

            .product-details__image:hover {
                transform: scale(1.05);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            }

            /* Keyframe Animations */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes float {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-10px);
                }
            }

            /* Content Section */
            .product-details__content {
                padding: 20px;
                color: #333;
            }

            .product-details__title {
                font-size: 2.5rem;
                font-weight: bold;
                color: #007bff;
                margin-bottom: 20px;
                animation: slideIn 1s ease-in-out;
            }

            .product-details__description {
                font-size: 1.1rem;
                color: #555;
                line-height: 1.8;
                margin-bottom: 30px;
                font-family: sans-serif, arial;
            }

            /* Slide In Animation */
            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateX(-50px);
                }

                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }

            /* Responsive Design */
            @media (max-width: 768px) {
                .product-details__image {
                    max-width: 90%;
                }

                .product-details__title {
                    font-size: 2rem;
                }
            }


/* --- Element Custom Styles --- */

.productdetails-custom-1 {
    background-size: cover; background-position: center; padding: 104px 0; position: relative;
}

.productdetails-custom-2 {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;
}

.productdetails-custom-3 {
    position: relative; z-index: 2;
}

.productdetails-custom-4 {
    max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 4px;
}

/* ═══════════════════════════════════════
   PREMIUM SPECIFICATIONS & BUTTONS STYLING
   ═══════════════════════════════════════ */

/* Underline Decoration */
.underline-bar {
    background: linear-gradient(90deg, #6413a6, #00C1D4) !important;
}

.underline-dot {
    background: #6413a6 !important;
}

/* Specifications / Product Info boxes */
.product-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 15px !important;
    padding: 0 !important;
}

.product-info li {
    padding: 12px 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    font-size: 15px !important;
    color: #2b2b2b !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
}

/* Box 1 - Specialty: Light Purple/Pink Gradient */
.product-info li:nth-child(1) {
    background: linear-gradient(135deg, #f6f0fe 0%, #fef5f9 100%) !important;
    border: 1px solid #ebd9fa !important;
}
.product-info li:nth-child(1):hover {
    border-color: #d9bbf7 !important;
    box-shadow: 0 8px 24px rgba(100, 19, 166, 0.08) !important;
    transform: translateX(4px) !important;
}

/* Box 2 - Segment: Light Blue/Teal Gradient */
.product-info li:nth-child(2) {
    background: linear-gradient(135deg, #eef9fa 0%, #f1f5fe 100%) !important;
    border: 1px solid #d4f1f3 !important;
}
.product-info li:nth-child(2):hover {
    border-color: #bce9ec !important;
    box-shadow: 0 8px 24px rgba(0, 150, 170, 0.08) !important;
    transform: translateX(4px) !important;
}

/* Box 3 - Packaging: Light Peach/Yellow Gradient */
.product-info li:nth-child(3) {
    background: linear-gradient(135deg, #fff5e8 0%, #fffcf3 100%) !important;
    border: 1px solid #ffe4c8 !important;
}
.product-info li:nth-child(3):hover {
    border-color: #ffd0a1 !important;
    box-shadow: 0 8px 24px rgba(255, 120, 0, 0.08) !important;
    transform: translateX(4px) !important;
}
/* Box 4 - Consume Type: Light Mint/Green Gradient */
.product-info li:nth-child(4) {
    background: linear-gradient(135deg, #ebfaee 0%, #f3fdf6 100%) !important;
    border: 1px solid #d4f3dd !important;
}
.product-info li:nth-child(4):hover {
    border-color: #bcecc9 !important;
    box-shadow: 0 8px 24px rgba(14, 189, 102, 0.08) !important;
    transform: translateX(4px) !important;
}

.product-info li strong.text-danger {
    color: #6413a6 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
    display: inline-block !important;
}

/* Availability Card */
.availability {
    background: linear-gradient(135deg, #ecfaf2 0%, #f5fbf8 100%) !important;
    border: 1px solid #dbf5e8 !important;
    border-radius: 10px !important;
    padding: 15px 18px !important;
    margin-top: 15px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

.availability:hover {
    border-color: #beedce !important;
    box-shadow: 0 8px 24px rgba(14, 189, 102, 0.08) !important;
    transform: translateX(4px) !important;
}

.availability h6.text-danger {
    color: #6413a6 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
}

.availability p {
    font-size: 14px !important;
    margin: 0 !important;
    color: #555 !important;
    line-height: 1.5 !important;
}

.availability a {
    color: #00C1D4 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.availability a:hover {
    color: #6413a6 !important;
}

/* Send Enquiry Button */
.product-details .btn-outline-danger {
    border: 2px solid #6413a6 !important;
    color: #6413a6 !important;
    background: transparent !important;
    border-radius: 50px !important;
    padding: 10px 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(100, 19, 166, 0.1) !important;
}

.product-details .btn-outline-danger:hover {
    background: #6413a6 !important;
    color: #fff !important;
    box-shadow: 0 6px 15px rgba(100, 19, 166, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Read More Button */
#read-more-btn {
    background-color: #00C1D4 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 193, 212, 0.2) !important;
}

#read-more-btn:hover {
    background-color: #6413a6 !important;
    box-shadow: 0 6px 15px rgba(100, 19, 166, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════
   MOBILE & TABLET RESPONSIVENESS OVERRIDES
   ═══════════════════════════════════════ */

/* Tablets & Mobiles (< 991px) */
@media (max-width: 991px) {
    .product-details {
        padding: 40px 0 !important;
    }
}

/* Mobile Screens (< 767px) */
@media (max-width: 767px) {
    /* Reset banner text container margin & padding */
    .banner-text {
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center !important;
    }

    .page-header__title {
        font-size: 2.2rem !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .nionx-breadcrumb {
        justify-content: center !important;
    }

    .product-details__title {
        font-size: 1.6rem !important;
        margin-bottom: 12px !important;
    }

    .product-details__description {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* Small Mobile Screens (< 575px) */
@media (max-width: 575px) {
    .product-details__canvas-container {
        height: 260px !important;
        padding: 15px !important;
    }

    .thumbnail-card {
        width: 60px !important;
        height: 60px !important;
        padding: 4px !important;
    }

    .product-info {
        grid-template-columns: 1fr !important;
    }

    .product-info li {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
}

/* Specification Cards - Colored Themes */
.detail-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px !important; /* Rounded corners */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.detail-card__title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
}

.detail-card__text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
    flex: 1;
}

/* 1. Purple theme */
.detail-card--purple {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
    border: 1px solid #ddd6fe !important;
}
.detail-card--purple .detail-card__title {
    color: #6d28d9 !important;
    border-color: rgba(109, 40, 217, 0.15) !important;
}
.detail-card--purple:hover {
    box-shadow: 0 10px 25px rgba(109, 40, 217, 0.1) !important;
    border-color: #c084fc !important;
    transform: translateY(-3px);
}

/* 2. Blue theme */
.detail-card--blue {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important;
    border: 1px solid #a5f3fc !important;
}
.detail-card--blue .detail-card__title {
    color: #0369a1 !important;
    border-color: rgba(3, 105, 161, 0.15) !important;
}
.detail-card--blue:hover {
    box-shadow: 0 10px 25px rgba(3, 105, 161, 0.1) !important;
    border-color: #38bdf8 !important;
    transform: translateY(-3px);
}

/* 3. Yellow theme */
.detail-card--yellow {
    background: linear-gradient(135deg, #fefbec 0%, #fef3c7 100%) !important;
    border: 1px solid #fde68a !important;
}
.detail-card--yellow .detail-card__title {
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.15) !important;
}
.detail-card--yellow:hover {
    box-shadow: 0 10px 25px rgba(180, 83, 9, 0.1) !important;
    border-color: #fbbf24 !important;
    transform: translateY(-3px);
}

/* 4. Green theme */
.detail-card--green {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 1px solid #bbf7d0 !important;
}
.detail-card--green .detail-card__title {
    color: #15803d !important;
    border-color: rgba(21, 128, 61, 0.15) !important;
}
.detail-card--green:hover {
    box-shadow: 0 10px 25px rgba(21, 128, 61, 0.1) !important;
    border-color: #4ade80 !important;
    transform: translateY(-3px);
}

/* 5. Rose theme */
.detail-card--rose {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1px solid #fecdd3 !important;
}
.detail-card--rose .detail-card__title {
    color: #be123c !important;
    border-color: rgba(190, 18, 60, 0.15) !important;
}
.detail-card--rose:hover {
    box-shadow: 0 10px 25px rgba(190, 18, 60, 0.1) !important;
    border-color: #fb7185 !important;
    transform: translateY(-3px);
}

/* 6. Teal theme */
.detail-card--teal {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
    border: 1px solid #99f6e4 !important;
}
.detail-card--teal .detail-card__title {
    color: #0f766e !important;
    border-color: rgba(15, 118, 110, 0.15) !important;
}
.detail-card--teal:hover {
    box-shadow: 0 10px 25px rgba(15, 118, 110, 0.1) !important;
    border-color: #2dd4bf !important;
    transform: translateY(-3px);
}

/* 7. Orange theme */
.detail-card--orange {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border: 1px solid #fed7aa !important;
}
.detail-card--orange .detail-card__title {
    color: #c2410c !important;
    border-color: rgba(194, 65, 12, 0.15) !important;
}
.detail-card--orange:hover {
    box-shadow: 0 10px 25px rgba(194, 65, 12, 0.1) !important;
    border-color: #fb923c !important;
    transform: translateY(-3px);
}

/* 8. Red theme */
.detail-card--red {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%) !important;
    border: 1px solid #ffa8a8 !important;
}
.detail-card--red .detail-card__title {
    color: #e03131 !important;
    border-color: rgba(224, 49, 49, 0.15) !important;
}
.detail-card--red:hover {
    box-shadow: 0 10px 25px rgba(224, 49, 49, 0.1) !important;
    border-color: #ff8787 !important;
    transform: translateY(-3px);
}