/* ==========================================================
   B2B Professional - Product Styles
   Product archive, single product, gallery, specs, tabs
   ========================================================== */

/* === Product Filter Bar === */
.product-filter-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; margin: 20px 0; flex-wrap: wrap; gap: 12px; }
.filter-left { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.filter-right { display: flex; align-items: center; }
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-group label { font-size: 13px; font-weight: 600; color: #495057; white-space: nowrap; }
.filter-select { padding: 7px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 13px; background: #fff; cursor: pointer; min-width: 150px; }

.view-toggle { display: flex; gap: 4px; }
.view-btn { background: #fff; border: 1px solid #ced4da; padding: 7px 12px; cursor: pointer; color: #6c757d; transition: all .15s; }
.view-btn.active, .view-btn:hover { background: var(--bs-theme-color); color: #fff; border-color: var(--bs-theme-color); }

.product-count { font-size: 14px; color: #6c757d; margin-bottom: 16px; }

/* === Product Card Extras === */
.product-card { position: relative; }
.product-badge { position: absolute; top: 12px; right: 12px; background: #e8590c; color: #fff; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 3px; text-transform: uppercase; z-index: 2; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; }

/* === List View === */
.product-grid.list-view { flex-direction: column; }
.product-grid.list-view .product-card { flex: 1 0 100%; display: flex; }
.product-grid.list-view .card-thumb { flex: 0 0 250px; height: auto; }
.product-grid.list-view .card-thumb img { height: 100%; }
.product-grid.list-view .card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* === Single Product Layout === */
.single-product { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; }

.product-gallery { flex: 0 0 480px; }
.gallery-main { position: relative; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.gallery-main-img { width: 100%; height: 380px; object-fit: contain; cursor: zoom-in; }
.gallery-placeholder { height: 380px; display: flex; align-items: center; justify-content: center; }
.gallery-placeholder i { font-size: 64px; color: #dee2e6; }
.gallery-zoom { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.5); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 14px; opacity: 0; transition: opacity .2s; }
.gallery-main:hover .gallery-zoom { opacity: 1; }

.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumb { flex: 0 0 72px; height: 72px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--bs-theme-color); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { flex: 1; min-width: 0; }
.product-title { font-size: 28px; margin-bottom: 10px; }
.product-category-badge { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

.product-quick-info { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.product-quick-info tr { border-bottom: 1px solid #f0f2f5; }
.product-quick-info th { text-align: left; padding: 10px 16px 10px 0; font-size: 14px; color: #6c757d; font-weight: 600; white-space: nowrap; width: 110px; }
.product-quick-info td { padding: 10px 0; font-size: 14px; color: #333; font-weight: 500; }

.product-actions { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.product-actions .btn i { margin-right: 6px; }

.product-tags { font-size: 14px; color: #6c757d; }
.product-tags strong { margin-right: 8px; }
.product-tags a { display: inline-block; background: #f0f2f5; padding: 3px 10px; border-radius: 3px; margin: 2px 4px 2px 0; font-size: 12px; color: #495057; }
.product-tags a:hover { background: var(--bs-theme-color); color: #fff; }

/* === Product Tabs === */
.product-detail-section { width: 100%; margin-top: 30px; }
.product-tabs { display: flex; border-bottom: 2px solid #e9ecef; margin-bottom: 24px; }
.tab-btn { padding: 12px 24px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 15px; font-weight: 600; color: #6c757d; cursor: pointer; transition: all .2s; }
.tab-btn:hover { color: var(--bs-theme-color); }
.tab-btn.active { color: var(--bs-theme-color); border-bottom-color: var(--bs-theme-color); }

.tab-content { display: none; padding: 10px 0; }
.tab-content.active { display: block; }

/* === Specs Table === */
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table thead th { background: #f8f9fa; padding: 12px 16px; text-align: left; font-size: 14px; font-weight: 700; color: var(--bs-theme-color); border-bottom: 2px solid #e9ecef; }
.specs-table tbody tr { border-bottom: 1px solid #f0f2f5; }
.specs-table tbody tr:nth-child(even) { background: #fafbfc; }
.specs-table tbody td { padding: 10px 16px; font-size: 14px; }
.specs-table tbody td:first-child { font-weight: 600; color: #495057; width: 40%; }

/* === Lightbox === */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 10000; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90%; max-height: 85vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); }