/* Note: Main variables defined in variables.css */
         /* Using centralized variables for consistency */

         body {
             font-family: var(--wm-font, 'Jost', sans-serif);
             background-color: var(--wm-white, #FFFFFF);
             overflow-x: hidden;
         }

         .product-hero-section {
             padding: 60px 0;
             background: linear-gradient(135deg, var(--wm-light-gray, #F8F9FC) 0%, var(--wm-white, #FFFFFF) 100%);
             border-bottom: 1px solid var(--brand-border);
         }

         .product-hero-section .product-title {
             font-size: clamp(2.5rem, 5vw, 3.5rem);
             font-weight: 700;
             color: var(--brand-dark-gray);
             line-height: 1.2;
         }

         .product-hero-section .product-tagline {
             font-size: 1.25rem;
             color: var(--brand-body-text);
             margin-top: 1rem;
         }

         .product-hero-section .meta-info {
             font-size: 0.9rem;
             color: #777;
             margin-top: 1.5rem;
             margin-bottom: 2rem;
         }

         .product-hero-section .meta-info strong {
             color: var(--brand-dark-gray);
         }

         .hero-buttons .btn {
             padding: 12px 30px;
             border-radius: 50px;
             font-weight: 600;
             text-transform: uppercase;
             margin-right: 15px;
             margin-bottom: 10px;
             border: 2px solid transparent;
             transition: all 0.3s ease;
         }

         .hero-buttons .btn-primary {
             background-color: var(--brand-red);
             border-color: var(--brand-red);
             color: var(--brand-white);
         }

         .hero-buttons .btn-primary:hover {
             background-color: var(--brand-red-dark);
             border-color: var(--brand-red-dark);
             transform: translateY(-3px);
         }

         .hero-buttons .btn-outline-secondary {
             border-color: var(--brand-dark-gray);
             color: var(--brand-dark-gray);
         }

         .hero-buttons .btn-outline-secondary:hover {
             background-color: var(--brand-dark-gray);
             color: var(--brand-white);
             transform: translateY(-3px);
         }

         .gallery-container {
             position: relative;
             display: flex;
             gap: 1rem;
         }

         .thumbnails-swiper {
             height: 500px;
             width: 100px;
             overflow: hidden;
         }

         .thumbnails-swiper .swiper-slide {
             height: 100px !important;
             width: 100px;
             border-radius: 8px;
             overflow: hidden;
             cursor: pointer;
             opacity: 0.5;
             border: 2px solid transparent;
             transition: all 0.3s ease;
             position: relative;
         }

         .thumbnails-swiper .swiper-slide::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: linear-gradient(135deg, transparent 0%, rgba(165, 42, 42, 0.1) 100%);
             opacity: 0;
             transition: opacity 0.3s ease;
             z-index: 1;
         }

         .thumbnails-swiper .swiper-slide:hover {
             opacity: 1;
             border-color: var(--wm-red);
         }

         .thumbnails-swiper .swiper-slide:hover::before {
             opacity: 1;
         }

         .thumbnails-swiper .swiper-slide-thumb-active {
             opacity: 1;
             border-color: var(--wm-red);
             border-width: 3px;
             box-shadow: 0 0 0 2px rgba(165, 42, 42, 0.2);
         }

         .thumbnails-swiper .swiper-slide {
             background-color: #f8f9fa; /* Light background like admin */
         }

         .thumbnails-swiper .swiper-slide img {
             width: 100%;
             height: 100%;
             object-fit: contain; /* Preserve aspect ratio, show full image like admin */
             object-position: center;
         }

         /* =================================================================
   THUMBNAILS SWIPER NAVIGATION (VERTICAL ARROWS - UP/DOWN - REFINED)
   Adjusted positioning for seamless integration.
================================================================= */
         .thumbnails-swiper .swiper-button-next,
         .thumbnails-swiper .swiper-button-prev {
             color: var(--brand-red);
             width: 35px;
             height: 35px;
             line-height: 35px;
             background: rgba(255, 255, 255, 0.9);
             border-radius: 50%;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
             transition: all 0.3s ease;

             /* Position horizontally centered within the thumbnail column */
             left: 50%;
             transform: translateX(-50%);
             /* Adjust for true horizontal centering */

             z-index: 10;
             /* Ensures the buttons are clickable and appear above thumbnails */
         }

         /* Position the "Previous" (Up) button 10px from the top inside the container */
         .thumbnails-swiper .swiper-button-prev {
             top: 10px;
             bottom: auto;
         }

         /* Position the "Next" (Down) button 10px from the bottom inside the container */
         .thumbnails-swiper .swiper-button-next {
             bottom: 10px;
             top: auto;
         }

         /* Explicitly set Font Awesome icons for UP and DOWN arrows */
         .thumbnails-swiper .swiper-button-prev:after {
             font-family: 'Font Awesome 6 Free';
             font-weight: 900;
             content: '\f077';
             /* Unicode for solid 'chevron-up' icon */
             font-size: 16px;
         }

         .thumbnails-swiper .swiper-button-next:after {
             font-family: 'Font Awesome 6 Free';
             font-weight: 900;
             content: '\f078';
             /* Unicode for solid 'chevron-down' icon */
             font-size: 16px;
         }

         /* Hover effect for thumbnail swiper buttons */
         .thumbnails-swiper .swiper-button-next:hover,
         .thumbnails-swiper .swiper-button-prev:hover {
             background-color: var(--brand-red);
             color: var(--brand-white);
             transform: translateX(-50%) scale(1.1);
             /* Slight enlarge effect on hover, maintaining center */
         }

        .main-image-swiper {
            width: calc(100% - 100px - 1rem);
            border: none;
            background-color: transparent;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
            display: block;
        }

         .main-image-swiper::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: linear-gradient(135deg, rgba(165, 42, 42, 0.02) 0%, transparent 100%);
             z-index: 1;
             pointer-events: none;
             border-radius: 16px;
         }

        .main-image-swiper .swiper-wrapper {
            width: 100%;
            height: auto;
        }

         .main-image-swiper .swiper-slide {
            height: auto;
            width: 100%;
            position: relative;
            background-color: #f8f9fa; /* Light background like admin */
            padding: 0;
            overflow: hidden;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 500px; /* Ensure minimum height for proper display */
         }

        .main-image-swiper .swiper-slide img {
            position: static;
            width: auto;
            max-width: 100%;
            max-height: 100%;
            height: auto;
            object-fit: contain; /* Preserve aspect ratio, show full image like admin */
            object-position: center;
            display: block;
            margin: 0 auto;
            image-rendering: auto;
            image-rendering: -webkit-optimize-contrast;
         }

         .view-360-btn-overlay {
             position: absolute;
             top: 1rem;
             right: 1rem;
             z-index: 10;
             width: 60px;
             height: 60px;
             background: linear-gradient(135deg, var(--wm-red, #A52A2A) 0%, var(--wm-red-dark, #7A1F1F) 100%);
             color: #fff;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 1.8rem;
             border: 3px solid rgba(255, 255, 255, 0.9);
             cursor: pointer;
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             text-decoration: none;
             box-shadow: 0 4px 15px rgba(165, 42, 42, 0.4);
         }

         .view-360-btn-overlay:hover {
             background: linear-gradient(135deg, var(--wm-red-dark, #7A1F1F) 0%, var(--wm-red, #A52A2A) 100%);
             transform: scale(1.15) rotate(5deg);
             border-color: #fff;
             box-shadow: 0 8px 25px rgba(165, 42, 42, 0.6);
         }

         .details-section {
             padding: 80px 0;
         }

         .content-sidebar {
             position: sticky;
             top: 120px;
         }

         .content-sidebar h5 {
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 0.5px;
             color: var(--brand-dark-gray);
             padding-bottom: 10px;
             border-bottom: 1px solid var(--brand-border);
             margin-bottom: 15px;
         }

         .content-sidebar .nav-link {
             color: var(--brand-body-text);
             padding: 8px 5px;
             font-weight: 500;
             border-left: 3px solid transparent;
             transition: all 0.2s ease;
         }

         .content-sidebar .nav-link:hover {
             color: var(--brand-red);
             padding-left: 12px;
         }

         .content-sidebar .nav-link.active {
             color: var(--brand-red);
             font-weight: 700;
             border-left-color: var(--brand-red);
             padding-left: 12px;
         }

         .content-main .content-block {
             margin-bottom: 80px;
             scroll-margin-top: 120px;
         }

         .content-main .content-title {
             font-size: 2.2rem;
             font-weight: 600;
             color: var(--brand-dark-gray);
             margin-bottom: 1.5rem;
             padding-bottom: 1rem;
             border-bottom: 2px solid var(--brand-red);
             display: inline-block;
         }

         .content-main p,
         .content-main li {
             line-height: 1.8;
             color: var(--brand-body-text);
         }

         .content-main ul {
             padding-left: 20px;
         }

         .content-main ul li {
             margin-bottom: 0.5rem;
         }

         .benefit-item {
             text-align: center;
             padding: 30px;
             background: var(--brand-light-gray);
             border: 1px solid var(--brand-border);
             border-radius: 12px;
             transition: all 0.3s ease;
             height: 100%;
         }

         .benefit-item:hover {
             transform: translateY(-8px);
             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
             border-color: var(--brand-red);
             background-color: var(--brand-white);
         }

         .benefit-item .icon {
             font-size: 2.5rem;
             color: var(--brand-red);
             margin-bottom: 1rem;
         }

         .benefit-item h4 {
             font-weight: 600;
             margin-bottom: 0.5rem;
             color: var(--brand-dark-gray);
         }

         .specs-table {
             font-size: 1rem;
         }

         .specs-table tr:nth-child(odd)>td {
             background-color: var(--brand-light-gray);
         }

         .specs-table td {
             padding: 1rem;
             border-bottom: 1px solid var(--brand-border);
         }

         .specs-table tr:last-child td {
             border-bottom: 0;
         }

         .specs-table td:first-child {
             font-weight: 600;
             color: var(--brand-dark-gray);
         }

         .document-list {
             list-style: none;
             padding: 0;
         }

         .document-item a {
             display: flex;
             align-items: center;
             text-decoration: none;
             padding: 1.25rem;
             border: 1px solid var(--brand-border);
             border-radius: 8px;
             transition: all 0.3s ease;
             background-color: var(--brand-white);
         }

         .document-item a:hover {
             background-color: var(--brand-light-gray);
             border-color: var(--brand-red);
             transform: translateY(-5px);
             box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
         }

         .document-item .doc-icon {
             font-size: 2rem;
             color: var(--brand-red);
             margin-right: 1.5rem;
             width: 32px;
             text-align: center;
         }

         .document-item .doc-title {
             font-weight: 600;
             color: var(--brand-dark-gray);
             margin-bottom: 0;
         }

         .document-item .doc-info {
             font-size: 0.85rem;
             color: var(--brand-body-text);
         }

         /* REMOVED - Consolidated below */

         .modal-backdrop {
             --bs-backdrop-opacity: 0.75;
         }

         .modal-header,
         .modal-footer {
             border: none;
         }

         .main-image-swiper .swiper-slide {
             /* ... existing styles ... */
             cursor: pointer;
             /* Add this line */
         }



         /* Add this to your <style> block at the top of the file */
         .custom-hotspot-logo {
             width: 150px;
             height: auto;
             border-radius: 8px;
             background: rgba(255, 255, 255, 0.8);
             padding: 10px;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         }


         /* Add these styles for the static overlays */
         .modal-body {
             position: relative;
             /* This is crucial for positioning children elements */
         }



         /* زر بدون animations */
         .static-button-overlay {
             position: absolute;
             bottom: 30px;
             left: 50%;
             transform: translateX(-50%);
             z-index: 100;
             transition: none !important;
             animation: none !important;
         }

         .static-button-overlay:hover,
         .static-button-overlay:focus,
         .static-button-overlay:active {
             transform: translateX(-50%) !important;
             transition: none !important;
             animation: none !important;
         }



         .static-info-overlay .info-label {
             font-weight: 600;
             color: #ddd;
         }

         .modal-footer.view-switcher .btn {
             border: 1px solid #6c757d;
         }

         .modal-footer.view-switcher .btn.active {
             background-color: #fff;
             color: #212529;
             border-color: #fff;
         }

         /* =================================================================
   NEW: RESPONSIVE DESIGN ADJUSTMENTS
================================================================= */

         /* Medium devices (tablets, less than 992px) */
         @media (max-width: 991px) {
             .content-sidebar {
                 display: none;
                 /* Sidebar is already hidden by Bootstrap 'd-lg-block', this is a fallback */
             }

             /* Center hero content when sidebar is not present */
             .product-hero-section .col-lg-6 {
                 text-align: center;
             }

             .product-hero-section .meta-info {
                 justify-content: center;
             }

             .hero-buttons {
                 margin-bottom: 40px;
             }
         }


         /* Small devices (phones, less than 768px) */
         @media (max-width: 767px) {
             /* --- Hero Section --- */
             .product-hero-section {
                 padding: 30px 0;
             }

             .product-hero-section .product-title {
                 font-size: 1.6rem;
                 line-height: 1.3;
                 margin-bottom: 0.75rem;
             }

             .product-hero-section .product-tagline {
                 font-size: 0.95rem;
                 line-height: 1.5;
             }

             .product-hero-section .meta-info {
                 font-size: 0.8rem;
                 margin-top: 1rem;
                 margin-bottom: 1.5rem;
                 flex-wrap: wrap;
                 gap: 0.5rem;
             }

             .hero-buttons {
                 display: flex;
                 flex-direction: column;
                 gap: 0.75rem;
                 margin-top: 1.5rem;
             }

             .hero-buttons .btn {
                 width: 100%;
                 margin: 0;
                 padding: 12px 24px;
                 font-size: 0.9rem;
             }

             /* --- Image Gallery - Mobile Optimized --- */
             .gallery-container {
                 flex-direction: column;
                 gap: 0.75rem;
                 margin-bottom: 2rem;
             }

            .main-image-swiper {
                width: 100%;
                min-height: 320px;
                max-height: 400px;
                order: 1;
                border-radius: 12px;
                overflow: hidden;
            }

            .main-image-swiper .swiper-slide {
                background-color: #f8f9fa;
                min-height: 320px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .main-image-swiper .swiper-slide img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

             .thumbnails-swiper {
                 width: 100%;
                height: 90px;
                 order: 2;
                padding: 0 40px;
                margin-top: 0.5rem;
             }

             .thumbnails-swiper .swiper-slide {
                width: 85px !important;
                height: 85px !important;
                border-radius: 8px;
                background-color: #f8f9fa;
                overflow: hidden;
            }

            .thumbnails-swiper .swiper-slide img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

             .thumbnails-swiper .swiper-button-prev,
             .thumbnails-swiper .swiper-button-next {
                width: 32px;
                height: 32px;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 50%;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
             }

             .thumbnails-swiper .swiper-button-prev {
                left: 5px;
             }

             .thumbnails-swiper .swiper-button-next {
                right: 5px;
             }

             .view-360-btn-overlay {
                width: 45px;
                height: 45px;
                font-size: 1.3rem;
                bottom: 15px;
                right: 15px;
             }

             /* --- Content Section --- */
             .details-section {
                 padding: 40px 0;
             }

             .content-main .content-block {
                 margin-bottom: 40px;
                 scroll-margin-top: 70px;
             }

             .content-main .content-title {
                 font-size: 1.5rem;
                 line-height: 1.3;
                 margin-bottom: 1rem;
             }

             .content-main .content-text {
                 font-size: 0.95rem;
                 line-height: 1.7;
             }

             /* --- Specifications Table - Mobile Optimized --- */
             .table-responsive {
                 overflow-x: visible; /* Remove horizontal scroll */
                 -webkit-overflow-scrolling: touch;
             }

             .specs-table {
                 font-size: 0.9rem;
                 width: 100%;
                 display: block;
             }

             .specs-table tbody {
                 display: block;
                 width: 100%;
             }

             .specs-table tr {
                 display: flex;
                 flex-direction: column;
                 width: 100%;
                 margin-bottom: 1rem;
                 border: 1px solid var(--brand-border);
                 border-radius: 8px;
                 overflow: hidden;
                 background-color: var(--wm-white);
             }

             .specs-table td {
                 display: block;
                 width: 100%;
                 padding: 12px 16px;
                 border: none;
                 border-bottom: 1px solid var(--brand-border);
             }

             .specs-table tr:last-child {
                 margin-bottom: 0;
             }

             .specs-table td:first-child {
                 font-weight: 700;
                 color: var(--brand-dark-gray);
                 background-color: var(--wm-light-gray);
                 border-bottom: 2px solid var(--brand-red);
                 font-size: 0.95rem;
             }

             .specs-table td:last-child {
                 border-bottom: none;
                 font-size: 0.9rem;
                 color: var(--brand-body-text);
                 padding-top: 10px;
             }

             .specs-table td small.text-muted {
                 display: block;
                 margin-top: 6px;
                 font-size: 0.8rem;
                 color: #888;
                 line-height: 1.4;
             }

             /* Remove odd row background on mobile */
             .specs-table tr:nth-child(odd)>td {
                 background-color: transparent;
             }

             .specs-table tr:nth-child(odd)>td:first-child {
                 background-color: var(--wm-light-gray);
             }

             /* --- Related Products --- */
             .related-products-section {
                 padding: 40px 0;
             }

             .related-products-section .section-title {
                 font-size: 1.5rem;
                 margin-bottom: 1.5rem;
             }

             .related-products-section .solution-card {
                 margin-bottom: 1.5rem;
             }

             .related-products-section .solution-card .card-image-wrapper {
                 height: 220px;
             }

             /* --- 360 Modal - تصميم بسيط واحترافي --- */
             #modal-360 .modal-dialog {
                 margin: 0;
                 max-width: 95%;
                 width: 95%;
                 max-height: 90vh;
                 position: fixed;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
             }

             #modal-360 .modal-content {
                 max-height: 90vh;
                 border-radius: 8px;
                 overflow: hidden;
                 display: flex;
                 flex-direction: column;
             }

             #modal-360 .modal-body {
                 flex: 1;
                 position: relative;
                 overflow: hidden;
                 padding: 0;
             }

             #pannellum-viewer {
                 height: calc(90vh - 100px);
                 min-height: 350px;
                 width: 100%;
                 position: relative !important;
                 z-index: 1 !important;
                 margin-top: 0 !important;
                 top: 0 !important;
             }

             /* Header بسيط - إصلاح التداخل العلوي */
             #modal-360 .modal-header {
                 position: relative !important;
                 z-index: 1000 !important;
                 padding: 0.5rem 0.75rem;
                 flex-shrink: 0;
                 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                 background-color: rgba(0, 0, 0, 0.9) !important;
                 backdrop-filter: blur(10px);
             }

             #modal-360 .modal-header .modal-title {
                 font-size: 0.85rem;
                 font-weight: 600;
                 margin: 0;
                 line-height: 1.2;
             }

             #modal-360 .modal-header .btn-close {
                 width: 1.25rem;
                 height: 1.25rem;
                 padding: 0;
                 margin: 0;
                 opacity: 0.8;
             }

             /* Overlays بسيطة - الزر والشعار في نفس الـ container */
             #modal-360 .bottom-left-overlay {
                 bottom: 5px !important;
                 left: 5px !important;
                 gap: 4px !important;
                 flex-direction: column !important;
                 align-items: flex-start !important;
                 z-index: 10 !important;
                 max-width: calc(100% - 10px) !important;
                 pointer-events: none !important;
                 position: absolute !important;
                 display: flex !important;
             }

             /* تفعيل pointer events فقط على العناصر القابلة للنقر */
             #modal-360 .bottom-left-overlay .static-button-overlay,
             #modal-360 .bottom-left-overlay .static-logo-overlay,
             #modal-360 .bottom-left-overlay .static-info-overlay {
                 pointer-events: auto !important;
             }

             /* زر صغير في الوسط من الأسفل */
             #modal-360 .static-button-overlay,
             #modal-360 .static-button-overlay.btn,
             #modal-360 .static-button-overlay.btn-primary {
                 position: absolute !important;
                 bottom: 10px !important;
                 left: 50% !important;
                 transform: translateX(-50%) !important;
                 padding: 3px 8px !important;
                 font-size: 0.65rem !important;
                 line-height: 1.3 !important;
                 border-radius: 50px !important;
                 white-space: normal !important;
                 word-wrap: break-word !important;
                 margin: 0 !important;
                 width: auto !important;
                 max-width: 90px !important;
                 min-width: auto !important;
                 height: auto !important;
                 min-height: auto !important;
                 display: inline-block !important;
                 z-index: 1000 !important;
                 transition: all 0.3s ease !important;
                 animation: none !important;
                 box-shadow: none !important;
                 border: none !important;
                 text-transform: none !important;
                 font-weight: 600 !important;
                 letter-spacing: normal !important;
                 background-color: var(--wm-red) !important;
                 color: var(--wm-white) !important;
                 text-decoration: none !important;
                 overflow: visible !important;
             }

             #modal-360 .static-button-overlay:hover,
             #modal-360 .static-button-overlay:focus,
             #modal-360 .static-button-overlay:active {
                 transform: translateX(-50%) !important;
                 transition: all 0.3s ease !important;
                 animation: none !important;
                 box-shadow: none !important;
                 padding: 3px 8px !important;
                 font-size: 0.65rem !important;
                 height: auto !important;
                 overflow: visible !important;
                 background-color: var(--wm-red-dark) !important;
                 color: var(--wm-white) !important;
             }

             /* الأيقونة صغيرة */
             #modal-360 .static-button-overlay i {
                 font-size: 0.6rem !important;
                 margin-right: 3px !important;
                 line-height: 1 !important;
                 vertical-align: middle !important;
             }

             #modal-360 .bottom-left-overlay .static-logo-overlay {
                 width: 40px;
                 height: auto;
             }

             #modal-360 .static-info-overlay {
                 position: relative !important;
                 top: auto !important;
                 left: auto !important;
                 font-size: 0.65rem !important;
                 padding: 3px 6px !important;
                 border-radius: 3px !important;
                 margin: 0 !important;
                 z-index: 1 !important;
                 max-width: 150px;
                 line-height: 1.3 !important;
             }

             /* --- Buttons and Actions --- */
             .hero-buttons .btn {
                 font-size: 0.85rem;
                 padding: 10px 20px;
             }

             /* --- Documents Section --- */
             .documents-list .document-item {
                 padding: 12px;
                 font-size: 0.9rem;
             }

             .documents-list .document-item i {
                 font-size: 1.1rem;
                 margin-right: 10px;
             }
         }

         /* Extra small devices (phones, 575px and down) */
         @media (max-width: 575px) {
             .product-hero-section {
                 padding: 25px 0;
             }

             .product-hero-section .product-title {
                 font-size: 1.4rem;
             }

             .main-image-swiper {
                 min-height: 280px;
                 max-height: 350px;
             }

             .main-image-swiper .swiper-slide {
                 min-height: 280px;
             }

             .thumbnails-swiper {
                 height: 80px;
                 padding: 0 35px;
             }

             .thumbnails-swiper .swiper-slide {
                 width: 75px !important;
                 height: 75px !important;
             }

             .content-main .content-title {
                 font-size: 1.3rem;
             }

             .specs-table {
                 font-size: 0.85rem;
             }

             .specs-table td {
                 padding: 10px 14px;
             }

             .specs-table td:first-child {
                 font-size: 0.9rem;
             }
         }

         /* resources/views/details.css */

         /* ... existing styles ... */

         .specs-table td small.text-muted {
             display: block;
             /* Make the note appear on a new line */
             font-size: 0.75rem;
             /* Make it slightly smaller than default small */
             margin-top: 5px;
             /* Add a little space above it */
             line-height: 1.2;
             color: #888;
             /* A slightly darker muted color for better readability */
         }

         /* Optional: Adjust vertical alignment if needed due to notes */
         .specs-table td {
             vertical-align: top;
             /* Align content to the top if notes make rows taller */
         }


         /* ==================================
   FINAL STYLES FOR 360 VIEWER OVERLAYS
   ================================== */

         /* This container holds the logo and info box in the bottom-left */
         .bottom-left-overlay {
             position: absolute;
             bottom: 20px;
             left: 20px;
             z-index: 1051;
             /* High z-index to ensure it's on top of the viewer */
             display: flex;
             align-items: flex-end;
             /* Aligns items to the bottom edge */
             gap: 20px;
             /* Space between logo and info box */
             pointer-events: none;
             /* IMPORTANT: Allows mouse dragging on the panorama underneath */
         }

         /* The Logo: No background, no frame */
         .bottom-left-overlay .static-logo-overlay {
             width: 80px;
             /* Adjust size as needed */
             height: auto;
             display: block;
             pointer-events: auto;
             /* Re-enable pointer events if you want the logo to be clickable/hoverable */
         }

         /* The Info Box: Positioned relative to the container */
         .bottom-left-overlay .static-info-overlay {
             background: rgba(0, 0, 0, 0.7);
             color: #fff;
             padding: 10px 15px;
             border-radius: 8px;
             font-size: 0.9rem;
             text-align: left;
             /* Ensures text aligns correctly */
             direction: ltr;
             /* Ensures LTR layout for this box specifically */
             pointer-events: auto;
             /* Allows text selection */
         }

         .bottom-left-overlay .info-label {
             font-weight: 600;
             color: #ccc;
             margin-right: 5px;
         }

         /* Desktop styles for 360 viewer overlays */
         .bottom-left-overlay {
             position: absolute;
             bottom: 20px;
             left: 20px;
             z-index: 1051;
             display: flex;
             align-items: flex-end;
             gap: 20px;
             pointer-events: none;
         }

         .bottom-left-overlay .static-logo-overlay {
             width: 80px;
             height: auto;
             display: block;
             pointer-events: auto;
         }

         .bottom-left-overlay .static-info-overlay {
             background: rgba(0, 0, 0, 0.7);
             color: #fff;
             padding: 10px 15px;
             border-radius: 8px;
             font-size: 0.9rem;
             text-align: left;
             direction: ltr;
             pointer-events: auto;
         }

         .bottom-left-overlay .info-label {
             font-weight: 600;
             color: #ccc;
             margin-right: 5px;
         }

         /* Desktop: الزر منفصل بدون animations */
         .static-button-overlay {
             position: absolute;
             bottom: 30px;
             left: 50%;
             transform: translateX(-50%);
             z-index: 1051;
             transition: none !important;
             animation: none !important;
         }

         .static-button-overlay:hover,
         .static-button-overlay:focus,
         .static-button-overlay:active {
             transform: translateX(-50%) !important;
             transition: none !important;
             animation: none !important;
         }



         /* ==================================
   Frameless 360 Modal Styles
   ================================== */

         /* Target the specific 360 modal dialog to make it wider */
         #modal-360 .modal-dialog {
             max-width: 95vw;
             /* Use most of the screen width */
         }

         /* Make the main modal container transparent and borderless */
         #modal-360 .modal-content {
             background: transparent;
             border: none;
             box-shadow: none;
         }

         /* Desktop: Header فوق الـ viewer - إصلاح التداخل */
         #modal-360 .modal-header {
             border-bottom: none;
             background: rgba(0, 0, 0, 0.9) !important;
             backdrop-filter: blur(10px);
             position: relative !important;
             z-index: 1000 !important;
             padding: 1rem 1.5rem;
             border-radius: 0;
         }

         #modal-360 .modal-header .modal-title {
             font-size: 1.1rem;
             font-weight: 600;
         }

         /* ========================================
            Pannellum 360 Viewer - High Quality Rendering
            ======================================== */
         /* Desktop: Viewer تحت الـ header */
         #pannellum-viewer {
             width: 100% !important;
             height: 85vh !important;
             min-height: 600px !important;
             position: relative !important;
             z-index: 1 !important;
             border-radius: 12px;
             margin-top: 0 !important;
             top: 0 !important;
         }

         /* Ensure Pannellum canvas renders at full resolution with high quality */
         #pannellum-viewer .pnlm-container,
         #pannellum-viewer canvas {
             width: 100% !important;
             height: 100% !important;
             image-rendering: -webkit-optimize-contrast;
             image-rendering: crisp-edges;
             image-rendering: auto;
             /* Force high-quality rendering */
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
         }

         /* Remove any blur/transform issues and ensure crisp rendering */
         #pannellum-viewer * {
             -webkit-backface-visibility: hidden;
             backface-visibility: hidden;
             -webkit-transform: translateZ(0) scale(1.0, 1.0);
             transform: translateZ(0);
             /* Prevent subpixel rendering issues */
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
         }

         /* High-quality image rendering for panorama */
         #pannellum-viewer img {
             image-rendering: -webkit-optimize-contrast;
             image-rendering: auto;
             max-width: none !important;
             max-height: none !important;
         }

/* =================================================================
   RELATED PRODUCTS SECTION
================================================================= */
.related-products-section {
    background-color: var(--color-background); /* Dynamic background based on theme */
    padding: 80px 0;
}

.related-products-section .section-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 15px;
    text-align: center;
}

.related-products-section .section-subtitle {
    font-size: 1.05rem;
    color: var(--color-text);
    max-width: 700px;
    margin: 0 auto 50px auto;
    text-align: center;
}

/* Use the same solution-card styles from shop.css for consistency */
.related-products-section .solution-card {
    background-color: #ffffff; /* Always white in light mode */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    position: relative;
    will-change: transform;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtle shadow like shop page */
}

.related-products-section .solution-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.related-products-section .solution-card .card-image-wrapper {
    display: block;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background-color: #f8f9fa; /* Light gray background like shop page */
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    position: relative;
}

.related-products-section .solution-card .card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                object-fit 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    will-change: transform;
}

.related-products-section .solution-card:hover .card-image {
    transform: scale(1.05);
    object-fit: cover;
    object-position: center;
}

.related-products-section .solution-card .card-content {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

.related-products-section .solution-card .card-tags {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-weight: 500;
    margin-bottom: 8px;
}

.related-products-section .solution-card .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
    line-height: 1.35;
    letter-spacing: -0.02em;
    transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.related-products-section .solution-card:hover .card-title {
    color: var(--color-primary);
}

.related-products-section .solution-card .card-description {
    color: var(--color-text);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    flex-grow: 1;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-products-section .solution-card .card-specs {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.related-products-section .solution-card .spec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.related-products-section .solution-card .spec-item i {
    font-size: 0.9rem;
    color: var(--color-primary);
    margin-bottom: 0.15rem;
    display: block;
}

.related-products-section .solution-card .spec-item .spec-value {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-dark);
    display: block;
}

.related-products-section .solution-card .spec-item .spec-label {
    font-size: 0.7rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    display: block;
}

.related-products-section .solution-card .btn-view-details {
    background-color: var(--color-primary);
    color: #ffffff !important;
    border-radius: 8px;
    padding: 10px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.75rem;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.related-products-section .solution-card .btn-view-details::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.related-products-section .solution-card .btn-view-details:hover::before {
    width: 300px;
    height: 300px;
}

.related-products-section .solution-card .btn-view-details:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0 8px 20px rgba(165, 42, 42, 0.3);
    transform: translateY(-2px);
}

.related-products-section .solution-card .btn-view-details:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0 8px 20px rgba(165, 42, 42, 0.3);
    transform: translateY(-2px);
}

/* =================================================================
   DARK MODE SUPPORT FOR PRODUCT DETAILS PAGE
================================================================= */
[data-theme="dark"] body {
    background-color: var(--dm-bg);
}

[data-theme="dark"] .product-hero-section {
    background: linear-gradient(135deg, var(--dm-surface) 0%, var(--dm-bg) 100%);
    border-bottom-color: var(--dm-border);
}

[data-theme="dark"] .product-hero-section .product-title {
    color: var(--dm-text-primary);
}

[data-theme="dark"] .product-hero-section .product-tagline {
    color: var(--dm-text-secondary);
}

[data-theme="dark"] .product-hero-section .meta-info {
    color: var(--dm-text-secondary);
}

[data-theme="dark"] .product-hero-section .meta-info strong {
    color: var(--dm-text-primary);
}

[data-theme="dark"] .hero-buttons .btn-outline-secondary {
    border-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

[data-theme="dark"] .hero-buttons .btn-outline-secondary:hover {
    background-color: var(--wm-red);
    border-color: var(--wm-red);
    color: var(--wm-white);
}

[data-theme="dark"] .main-image-swiper .swiper-slide {
    background-color: #1a1a1a; /* Dark background for dark mode */
}

[data-theme="dark"] .thumbnails-swiper .swiper-slide {
    background-color: #1a1a1a; /* Dark background for dark mode */
}

[data-theme="dark"] .main-image-swiper {
    background-color: var(--dm-surface);
}

[data-theme="dark"] .thumbnails-swiper .swiper-button-next,
[data-theme="dark"] .thumbnails-swiper .swiper-button-prev {
    background: rgba(37, 40, 48, 0.9);
}

[data-theme="dark"] .content-sidebar h5 {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border);
}

[data-theme="dark"] .content-sidebar .nav-link {
    color: var(--dm-text-secondary);
}

[data-theme="dark"] .content-sidebar .nav-link:hover,
[data-theme="dark"] .content-sidebar .nav-link.active {
    color: var(--wm-red);
    border-left-color: var(--wm-red);
}

/* Dark Mode Support for Related Products */
[data-theme="dark"] .related-products-section {
    background-color: var(--dm-bg);
}

[data-theme="dark"] .related-products-section .solution-card {
    background-color: #1a1a1a; /* Black background in dark mode like shop page */
    border-color: var(--dm-border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Darker shadow for dark mode */
}

[data-theme="dark"] .related-products-section .solution-card .card-image-wrapper {
    background-color: #0a0a0a; /* Darker background for images in dark mode */
}

[data-theme="dark"] .related-products-section .solution-card .card-title {
    color: var(--dm-text-primary);
}

[data-theme="dark"] .related-products-section .solution-card .card-description {
    color: var(--dm-text-secondary);
}

[data-theme="dark"] .related-products-section .solution-card .card-tags {
    color: var(--dm-text-secondary);
}

[data-theme="dark"] .related-products-section .solution-card .card-specs {
    border-top-color: var(--dm-border);
}

[data-theme="dark"] .related-products-section .solution-card .spec-item .spec-value {
    color: var(--dm-text-primary);
}

[data-theme="dark"] .related-products-section .solution-card .spec-item .spec-label {
    color: var(--dm-text-secondary);
}

[data-theme="dark"] .related-products-section .section-title {
    color: var(--dm-text-primary);
}

[data-theme="dark"] .related-products-section .section-subtitle {
    color: var(--dm-text-secondary);
}