/* product-detail.css — product detail page styles. * Extracted from products.css in Phase 3. Loaded only by products/*.html. * Contains: image gallery, tabs, spec table, download card, lightbox. * * NOTE: not yet wired into any page's — products/*.html still load * products.css (which contains these rules). Phase 5 will switch them. */ /* Image Gallery Styles - Mobile Optimized */ .image-gallery { position: relative; max-width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .main-image { width: 100%; height: 300px; object-fit: contain; display: block; background-color: #ffffff; } .gallery-thumbs { display: flex; gap: 6px; padding: 8px; background: #f8f9fa; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .gallery-thumbs::-webkit-scrollbar { height: 4px; } .gallery-thumbs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px; } .thumb { width: 60px; height: 45px; min-width: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .thumb:hover { transform: scale(1.05); } .thumb.active { border-color: var(--color-primary-700); box-shadow: 0 0 0 3px var(--color-primary-200); } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); color: white; border: none; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 10; } .gallery-nav:hover { background: rgba(0, 0, 0, 0.8); transform: translateY(-50%) scale(1.1); } .gallery-prev { left: 10px; } .gallery-next { right: 10px; } /* Tab Styles - Mobile Optimized */ .tabs-container { background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; margin-top: 2rem; } .tab-buttons { display: flex; background: #f8f9fa; border-bottom: 1px solid #e0e0e0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tab-buttons::-webkit-scrollbar { height: 4px; } .tab-buttons::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px; } .tab-button { flex: 1; min-width: 120px; padding: 0.75rem 1rem; background: none; border: none; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 0.875rem; color: #666; transition: all 0.3s ease; position: relative; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .tab-button .material-symbols-rounded { font-size: 1.25rem; } .tab-button:hover { background: rgba(var(--color-primary-700-rgb), 0.05); color: var(--color-primary-700); } .tab-button.active { color: var(--color-primary-700); background: white; } .tab-button.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--color-primary-700); } .tab-content { padding: 1.5rem; display: none; animation: fadeIn 0.3s ease-in; } .tab-content.active { display: block; } /* PDF Download Card - Mobile Optimized */ .download-card { background: linear-gradient( 135deg, var(--color-primary-700) 0%, var(--color-primary-600) 100% ); color: white; padding: 1rem 1.5rem; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .download-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--color-primary-700-rgb), 0.3); } .download-btn { display: inline-flex; align-items: center; gap: 8px; background: white; color: var(--color-primary-700); padding: 0.75rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; font-size: 0.875rem; white-space: nowrap; } .download-btn:hover { background: #f8f9fa; transform: scale(1.05); } /* Specification Table - Mobile Optimized */ .spec-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.875rem; } .spec-table th { background: var(--color-primary-700); color: white; padding: 0.5rem; text-align: left; font-family: "Poppins", sans-serif; font-size: 0.875rem; } .spec-table td { padding: 0.5rem; border-bottom: 1px solid #e0e0e0; } .spec-table tr:nth-child(even) { background: #f8f9fa; } .spec-table tr:hover { background: var(--color-primary-50); } /* Lightbox Modal */ .lightbox-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 9999; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .lightbox-modal.active { display: flex; } .lightbox-content { max-width: 90%; max-height: 90%; position: relative; } .lightbox-image { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: -40px; right: 0; background: transparent; border: none; color: white; font-size: 40px; line-height: 1; cursor: pointer; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .lightbox-close:hover { transform: scale(1.1); } .lightbox-close:focus { outline: 2px solid white; outline-offset: 2px; } .main-image { cursor: pointer; transition: transform 0.3s ease; } .main-image:hover { transform: scale(1.02); }