/* Product Detail Page Styles */
   .product-detail-page {
       padding: 30px 0 60px;
   }

   /* Product Header */
   .product-header {
       margin-bottom: 40px;
       padding-bottom: 20px;
       border-bottom: 2px solid var(--border-color);
   }

   .product-header h1 {
       font-size: 2.8rem;
       margin-bottom: 15px;
       color: var(--secondary-color);
       line-height: 1.2;
   }

   .product-meta {
       display: flex;
       gap: 25px;
       flex-wrap: wrap;
   }

   .meta-item {
       display: flex;
       align-items: center;
       gap: 8px;
       color: var(--text-light);
       font-size: 0.95rem;
   }

   .meta-item i {
       color: var(--primary-color);
   }

   /* Product Layout */
   .product-detail-layout {
       display: grid;
       /* grid-template-columns: 1fr 400px; */
       gap: 50px;
       margin-bottom: 60px;
   }

   /* Product Gallery */
   .product-gallery {
       position: sticky;
       top: 100px;
       width: 57vw;
       height: fit-content;
   }

   .main-gallery {
       position: relative;
       margin-bottom: 20px;
       border-radius: 12px;
       overflow: hidden;
       background: #f9f9f9;
       border: 1px solid var(--border-color);
   }

   .main-image {
       height: 400px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .main-image img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
       transition: transform 0.3s ease;
       cursor: zoom-in;
   }

   .gallery-nav {
       position: absolute;
       top: 50%;
       left: 0;
       right: 0;
       display: flex;
       justify-content: space-between;
       padding: 0 20px;
       transform: translateY(-50%);
       z-index: 2;
   }

   .nav-btn {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.9);
       border: none;
       color: var(--secondary-color);
       font-size: 1.2rem;
       cursor: pointer;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .nav-btn:hover {
       background: var(--primary-color);
       color: var(--secondary-color);
       transform: scale(1.1);
   }

   .image-zoom {
       position: fixed;
       width: 300px;
       height: 300px;
       border: 1px solid var(--border-color);
       border-radius: 8px;
       background: white;
       background-repeat: no-repeat;
       display: none;
       z-index: 1000;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
       pointer-events: none;
   }

   .thumbnail-gallery {
       display: flex;
       gap: 10px;
       width: 90vw;
       overflow-x: auto;
       padding: 10px 0;
   }

   .thumbnail {
       flex: 0 0 80px;
       height: 80px;
       border-radius: 8px;
       overflow: hidden;
       border: 2px solid transparent;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .thumbnail:hover,
   .thumbnail.active {
       border-color: var(--primary-color);
       transform: translateY(-2px);
   }

   .thumbnail img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .social-share {
       margin-top: 25px;
       padding-top: 20px;
       border-top: 1px solid var(--border-color);
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .social-share span {
       color: var(--text-light);
       font-weight: 500;
   }

   .share-buttons {
       display: flex;
       gap: 10px;
   }

   .share-btn {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       text-decoration: none;
       transition: all 0.3s ease;
       font-size: 1rem;
   }

   .share-btn:hover {
       transform: translateY(-3px);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   }

   .facebook {
       background: #3b5998;
   }

   .twitter {
       background: #1da1f2;
   }

   .pinterest {
       background: #bd081c;
   }

   .whatsapp {
       background: #25d366;
   }

   .email {
       background: #666;
   }

   /* Product Info Sidebar */
   .product-info-sidebar {
       /* position: sticky; */
       /* top: 100px; */
       height: fit-content;
   }

   .price-section {
       margin-bottom: 30px;
       padding-bottom: 25px;
       border-bottom: 1px solid var(--border-color);
   }

   .current-price {
       font-size: 2.5rem;
       font-weight: 700;
       color: var(--secondary-color);
       margin-bottom: 10px;
   }

   .original-price {
       font-size: 1.5rem;
       color: #999;
       text-decoration: line-through;
       margin-bottom: 10px;
   }

   .discount-badge {
       display: inline-block;
       padding: 6px 12px;
       background: #dc3545;
       color: white;
       border-radius: 20px;
       font-size: 0.9rem;
       font-weight: 600;
   }

   .rating-section {
       margin-bottom: 30px;
       padding-bottom: 25px;
       border-bottom: 1px solid var(--border-color);
   }

   .stars {
       display: flex;
       align-items: center;
       gap: 5px;
       margin-bottom: 10px;
   }

   .stars i {
       color: #ddd;
       font-size: 1.2rem;
   }

   .stars i.active {
       color: #ffc107;
   }

   .rating-value {
       margin-left: 10px;
       font-weight: 600;
       color: var(--secondary-color);
       font-size: 1.1rem;
   }

   .review-count {
       color: var(--text-light);
       font-size: 0.95rem;
       margin-bottom: 10px;
   }

   .view-reviews {
       padding: 0 !important;
       color: var(--primary-color);
       text-decoration: none;
       font-weight: 500;
       font-size: 0.95rem;
   }

   .view-reviews.active {
       background: none !important;
   }

   .view-reviews:hover {
       text-decoration: underline;
       color: var(--primary-color);
       background: none !important;
   }

   .quick-actions {
       display: flex;
       flex-direction: column;
       gap: 15px;
       margin-bottom: 30px;
   }

   .quick-actions .btn {
       padding: 15px;
       font-size: 1.1rem;
       font-weight: 600;
   }

   .btn-enquire {
       background: var(--primary-color);
       color: var(--secondary-color);
       border: 2px solid var(--primary-color);
   }

   .btn-enquire:hover {
       background: var(--secondary-color);
       color: var(--primary-color);
   }

   .btn-wishlist {
       background: transparent;
       color: var(--secondary-color);
       border: 2px solid var(--secondary-color);
   }

   .btn-wishlist:hover {
       background: var(--secondary-color);
       color: white;
   }

   .btn-wishlist.added {
       background: var(--primary-color);
       border-color: var(--primary-color);
       color: var(--secondary-color);
   }

   .btn-call {
       background: #28a745;
       color: white;
       border: 2px solid #28a745;
   }

   .btn-call:hover {
       background: #218838;
       border-color: #1e7e34;
   }

   .product-highlights {
       margin-bottom: 30px;
       padding: 25px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
   }

   .product-highlights h3 {
       margin-bottom: 20px;
       color: var(--secondary-color);
       font-size: 1.3rem;
   }

   .product-highlights ul {
       list-style: none;
       padding: 0;
   }

   .product-highlights li {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 12px;
       color: var(--text-dark);
   }

   .product-highlights i {
       color: var(--primary-color);
       font-size: 0.9rem;
   }

   .delivery-info {
       padding: 25px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
   }

   .delivery-info h3 {
       margin-bottom: 20px;
       color: var(--secondary-color);
       font-size: 1.3rem;
   }

   .delivery-options {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .option {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 15px;
       background: white;
       border-radius: 8px;
       border: 1px solid var(--border-color);
   }

   .option i {
       font-size: 1.5rem;
       color: var(--primary-color);
       width: 40px;
       text-align: center;
   }

   .option strong {
       display: block;
       margin-bottom: 5px;
       color: var(--secondary-color);
   }

   .option small {
       color: var(--text-light);
       font-size: 0.9rem;
   }

   /* Product Tabs */
   .product-tabs {
       margin-bottom: 60px;
       background: white;
       border-radius: 12px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
       border: 1px solid var(--border-color);
       overflow: hidden;
   }

   .tabs-header {
       display: flex;
       border-bottom: 1px solid var(--border-color);
       background: #f9f9f9;
       overflow-x: auto;
   }

   .tab-btn {
       padding: 20px 30px;
       background: none;
       border: none;
       border-bottom: 3px solid transparent;
       color: var(--text-dark);
       font-size: 1.1rem;
       font-weight: 600;
       cursor: pointer;
       white-space: nowrap;
       transition: all 0.3s ease;
   }

   .tab-btn:hover {
       color: var(--primary-color);
       background: rgba(212, 175, 55, 0.05);
   }

   .tab-btn.active {
       color: var(--primary-color);
       border-bottom-color: var(--primary-color);
       background: white;
   }

   .tabs-content {
       padding: 0;
   }

   .tab-pane {
       display: none;
   }

   .tab-pane.active {
       display: block;
   }

   .tab-content {
       padding: 40px;
   }

   .tab-content h2 {
       margin-bottom: 30px;
       color: var(--secondary-color);
       padding-bottom: 15px;
       border-bottom: 2px solid var(--primary-color);
   }

   .description-content {
       line-height: 1.8;
       color: var(--text-dark);
       font-size: 1.05rem;
       margin-bottom: 40px;
   }

   .description-content p {
       margin-bottom: 20px;
   }

   .key-features {
       margin-top: 40px;
   }

   .key-features h3 {
       margin-bottom: 30px;
       color: var(--secondary-color);
       font-size: 1.5rem;
   }

   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 30px;
   }

   .feature {
       display: block;
       text-align: center;
       padding: 30px 20px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .feature:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       border-color: var(--primary-color);
   }

   .feature i {
       font-size: 2.5rem;
       color: var(--primary-color);
       margin-bottom: 20px;
   }

   .feature h4 {
       margin-bottom: 15px;
       color: var(--secondary-color);
   }

   .feature p {
       color: var(--text-light);
       margin: 0;
   }

   /* Specifications */
   .specifications-table {
       overflow-x: auto;
   }

   .specifications-table table {
       width: 100%;
       border-collapse: collapse;
       border-radius: 8px;
       overflow: hidden;
       border: 1px solid var(--border-color);
   }

   .specifications-table th,
   .specifications-table td {
       padding: 15px 20px;
       text-align: left;
       border-bottom: 1px solid var(--border-color);
   }

   .specifications-table th {
       background: #f9f9f9;
       color: var(--secondary-color);
       font-weight: 600;
       width: 200px;
   }

   .specifications-table tr:last-child th,
   .specifications-table tr:last-child td {
       border-bottom: none;
   }

   /* FAQs */
   .faq-accordion,
   .default-faqs {
       margin-bottom: 40px;
   }

   .faq-item {
       margin-bottom: 15px;
       border: 1px solid var(--border-color);
       border-radius: 8px;
       overflow: hidden;
   }

   .faq-question {
       width: 100%;
       padding: 20px;
       background: white;
       border: none;
       text-align: left;
       font-size: 1.1rem;
       font-weight: 600;
       color: var(--secondary-color);
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       transition: all 0.3s ease;
   }

   .faq-question:hover {
       background: #f9f9f9;
   }

   .faq-question.active {
       background: var(--primary-color);
       color: var(--secondary-color);
   }

   .faq-question i {
       transition: transform 0.3s ease;
   }

   .faq-answer {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
   }

   .faq-answer p {
       padding: 20px;
       margin: 0;
       background: #f9f9f9;
       border-top: 1px solid var(--border-color);
       line-height: 1.8;
       color: var(--text-dark);
   }

   .ask-question-form {
       padding: 30px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
   }

   .ask-question-form h3 {
       margin-bottom: 10px;
       color: var(--secondary-color);
   }

   .ask-question-form p {
       color: var(--text-light);
       margin-bottom: 25px;
   }

   .ask-question-form .form-group {
       margin-bottom: 20px;
   }

   .ask-question-form textarea,
   .ask-question-form input {
       width: 100%;
       padding: 12px 15px;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       font-family: inherit;
       font-size: 1rem;
   }

   .ask-question-form textarea:focus,
   .ask-question-form input:focus {
       outline: none;
       border-color: var(--primary-color);
       box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
   }

   /* Reviews */
   .review-summary {
       display: grid;
       grid-template-columns: 300px 1fr;
       gap: 50px;
       margin-bottom: 40px;
       padding: 30px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
   }

   .average-rating {
       text-align: center;
   }

   .rating-number {
       font-size: 3.5rem;
       font-weight: 700;
       color: var(--secondary-color);
       margin-bottom: 10px;
       line-height: 1;
   }

   .rating-stars {
       margin-bottom: 10px;
   }

   .rating-stars i {
       color: #ffc107;
       font-size: 1.5rem;
       margin: 0 2px;
   }

   .rating-count {
       color: var(--text-light);
       font-size: 0.95rem;
   }

   .rating-bars {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .rating-bar {
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .star-label {
       width: 70px;
       color: var(--text-dark);
       font-weight: 500;
   }

   .bar-container {
       flex: 1;
       height: 10px;
       background: #e0e0e0;
       border-radius: 5px;
       overflow: hidden;
   }

   .bar-fill {
       height: 100%;
       background: var(--primary-color);
       border-radius: 5px;
       transition: width 0.3s ease;
   }

   .bar-count {
       width: 40px;
       text-align: right;
       color: var(--text-light);
       font-size: 0.9rem;
   }

   .review-list {
       margin-bottom: 40px;
   }

   .review-item {
       padding: 30px;
       border: 1px solid var(--border-color);
       border-radius: 12px;
       margin-bottom: 25px;
       background: white;
   }

   .review-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       margin-bottom: 20px;
       flex-wrap: wrap;
       gap: 15px;
   }

   .reviewer-info {
       flex: 1;
   }

   .reviewer-name {
       font-weight: 600;
       color: var(--secondary-color);
       margin-bottom: 5px;
   }

   .review-date {
       color: var(--text-light);
       font-size: 0.9rem;
   }

   .review-rating i {
       color: #ffc107;
       font-size: 1.1rem;
       margin-right: 2px;
   }

   .review-content h4 {
       margin-bottom: 15px;
       color: var(--secondary-color);
       font-size: 1.2rem;
   }

   .review-content p {
       color: var(--text-dark);
       line-height: 1.7;
   }

   .review-response {
       margin-top: 25px;
       padding: 20px;
       background: #f9f9f9;
       border-radius: 8px;
       border-left: 4px solid var(--primary-color);
   }

   .review-response strong {
       display: block;
       margin-bottom: 10px;
       color: var(--secondary-color);
   }

   .review-response p {
       color: var(--text-dark);
       margin: 0;
       line-height: 1.6;
   }

   .no-reviews {
       text-align: center;
       padding: 60px 20px;
   }

   .no-reviews i {
       font-size: 4rem;
       color: var(--border-color);
       margin-bottom: 20px;
   }

   .no-reviews h3 {
       margin-bottom: 15px;
       color: var(--secondary-color);
   }

   .no-reviews p {
       color: var(--text-light);
       max-width: 500px;
       margin: 0 auto;
   }

   .add-review-form {
       padding: 40px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
   }

   .add-review-form h3 {
       margin-bottom: 30px;
       color: var(--secondary-color);
   }

   .add-review-form .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       margin-bottom: 20px;
   }

   .add-review-form .form-group {
       margin-bottom: 25px;
   }

   .add-review-form label {
       display: block;
       margin-bottom: 8px;
       font-weight: 600;
       color: var(--text-dark);
   }

   .add-review-form input,
   .add-review-form textarea {
       width: 100%;
       padding: 12px 15px;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       font-family: inherit;
       font-size: 1rem;
   }

   .add-review-form input:focus,
   .add-review-form textarea:focus {
       outline: none;
       border-color: var(--primary-color);
       box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
   }

   .star-rating {
       display: flex;
       gap: 10px;
       margin-top: 10px;
   }

   .star-rating i {
       font-size: 1.8rem;
       color: #ddd;
       cursor: pointer;
       transition: color 0.3s ease;
   }

   .star-rating i.fas {
       color: #ffc107;
   }

   /* Installation */
   .installation-steps {
       margin-bottom: 40px;
   }

   .installation-steps h3 {
       margin-bottom: 30px;
       color: var(--secondary-color);
   }

   .steps {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 25px;
   }

   .step {
       text-align: center;
       padding: 30px 20px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
       position: relative;
   }

   .step-number {
       width: 50px;
       height: 50px;
       background: var(--primary-color);
       color: var(--secondary-color);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       font-weight: 700;
       margin: 0 auto 20px;
   }

   .step-content h4 {
       margin-bottom: 15px;
       color: var(--secondary-color);
   }

   .step-content p {
       color: var(--text-light);
       margin: 0;
       line-height: 1.6;
   }

   .service-options {
       margin-bottom: 40px;
   }

   .service-options h3 {
       margin-bottom: 30px;
       color: var(--secondary-color);
   }

   .services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 25px;
   }

   .service-card {
       padding: 30px 25px;
       background: white;
       border-radius: 12px;
       border: 1px solid var(--border-color);
       text-align: center;
       transition: all 0.3s ease;
   }

   .service-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       border-color: var(--primary-color);
   }

   .service-card i {
       font-size: 2.5rem;
       color: var(--primary-color);
       margin-bottom: 20px;
   }

   .service-card h4 {
       margin-bottom: 15px;
       color: var(--secondary-color);
   }

   .service-card p {
       color: var(--text-light);
       margin: 0;
       line-height: 1.6;
   }

   .service-cta {
       padding: 40px;
       background: var(--primary-color);
       border-radius: 12px;
       text-align: center;
       color: var(--secondary-color);
   }

   .service-cta h3 {
       margin-bottom: 15px;
       color: var(--secondary-color);
   }

   .service-cta p {
       margin-bottom: 30px;
       font-size: 1.1rem;
       opacity: 0.9;
   }

   .cta-buttons {
       display: flex;
       gap: 15px;
       justify-content: center;
       flex-wrap: wrap;
   }

   /* Enquiry Form */
   .enquiry-form-section {
       margin-bottom: 60px;
       padding: 40px;
       background: #f9f9f9;
       border-radius: 12px;
       border: 1px solid var(--border-color);
   }

   .section-header {
       text-align: center;
       margin-bottom: 40px;
   }

   .section-header h2 {
       margin-bottom: 15px;
       color: var(--secondary-color);
   }

   .section-header p {
       color: var(--text-light);
       max-width: 700px;
       margin: 0 auto;
   }

   .enquiry-form-container .alert {
       margin-bottom: 30px;
   }

   .enquiry-form-container form {
       max-width: 800px;
       margin: 0 auto;
   }

   .enquiry-form-container .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       margin-bottom: 20px;
   }

   .enquiry-form-container .form-group {
       margin-bottom: 25px;
   }

   .enquiry-form-container label {
       display: block;
       margin-bottom: 8px;
       font-weight: 600;
       color: var(--text-dark);
   }

   .enquiry-form-container input,
   .enquiry-form-container textarea {
       width: 100%;
       padding: 12px 15px;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       font-family: inherit;
       font-size: 1rem;
   }

   .enquiry-form-container input:focus,
   .enquiry-form-container textarea:focus {
       outline: none;
       border-color: var(--primary-color);
       box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
   }

   .enquiry-form-container .form-actions {
       text-align: center;
       margin-top: 30px;
   }

   .btn-large {
       padding: 15px 40px;
       font-size: 1.2rem;
   }

   .alternative-options {
       margin-top: 25px;
       padding-top: 25px;
       border-top: 1px solid var(--border-color);
   }

   .alternative-options p {
       margin-bottom: 15px;
       color: var(--text-light);
   }

   .contact-buttons {
       display: flex;
       gap: 15px;
       justify-content: center;
   }

   /* Related Products & Recently Viewed */
   .related-products,
   .recently-viewed {
       margin-bottom: 60px;
   }

   .related-products .products-grid,
   .recently-viewed .products-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       gap: 30px;
   }

   /* Responsive */
   @media (max-width: 1200px) {
       .product-detail-layout {
           grid-template-columns: 1fr;
           gap: 40px;
       }

       .product-gallery,
       .product-info-sidebar {
           position: static;
           width: 90vw;
       }
   }

   @media (max-width: 992px) {
       .review-summary {
           grid-template-columns: 1fr;
           gap: 30px;
       }

       .tab-content {
           padding: 30px;
       }

       .add-review-form .form-row,
       .enquiry-form-container .form-row {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 768px) {

       .product-detail-layout {
           grid-template-columns: 1fr !important;
           align-items: start;
       }

       .price-section {
           min-height: 190px;
       }

       .product-header h1 {
           font-size: clamp(22px, 6vw, 28px);
       }

       .tabs-header {
           flex-wrap: wrap;
       }

       .tab-btn {
           flex: 1;
           min-width: 140px;
           padding: 15px 20px;
           font-size: 1rem;
       }

       .main-image {
           min-height: 320px;
       }

       .features-grid {
           grid-template-columns: 1fr;
       }

       .services-grid {
           grid-template-columns: 1fr;
       }

       .steps {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 576px) {
       .tab-content {
           padding: 20px;
       }

       .product-meta {
           gap: 15px;
       }

       .quick-actions .btn {
           font-size: 1rem;
           padding: 12px;
       }

       .cta-buttons {
           flex-direction: column;
       }

       .contact-buttons {
           flex-direction: column;
       }
   }

   @media (max-width: 768px) {
       .product-gallery {
           position: relative !important;
           top: auto !important;
           width: 100% !important;
       }
   }

   @media (max-width: 768px) {
       .tab-pane {
           visibility: hidden;
           height: 0;
           overflow: hidden;
       }

       .tab-pane.active {
           visibility: visible;
           height: auto;
       }
   }