/* ==========================================================================
   XZB Robot Theme — product.css
   Product listing and detail page styles
   ========================================================================== */

/* ===== Product Card ===== */
.prod-card{background:var(--c-white);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-sm);transition:var(--tr);border:1px solid var(--c-border);position:relative;display:flex;flex-direction:column}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--c-primary)}
.prod-img{height:200px;overflow:hidden;background:var(--c-light);position:relative}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.prod-card:hover .prod-img img{transform:scale(1.08)}
.prod-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--c-light);color:var(--c-text-lighter)}
.prod-img-placeholder svg{width:48px;height:48px}

/* Product badge */
.prod-badge{position:absolute;top:12px;left:12px;background:var(--c-primary);color:var(--c-white);font-size:0.72rem;font-weight:600;padding:4px 10px;border-radius:var(--r-sm);text-transform:uppercase;z-index:1;letter-spacing:0.5px}
.prod-badge.badge-new{background:var(--c-success)}
.prod-badge.badge-hot{background:var(--c-danger)}

/* Product body */
.prod-body{padding:20px;display:flex;flex-direction:column;flex:1}
.prod-body h3{font-size:0.92rem;font-weight:600;color:var(--c-dark);margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:42px}
.prod-card:hover .prod-body h3{color:var(--c-primary)}
.prod-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.prod-meta .tag{font-size:0.72rem;padding:2px 8px;border-radius:var(--r-sm);background:var(--c-primary-alpha);color:var(--c-primary);font-weight:600}
.prod-meta .tag.tag-brand{background:rgba(45,45,68,0.1);color:var(--c-steel)}
.prod-price{font-family:var(--f-mono);font-size:1.05rem;font-weight:600;color:var(--c-primary);margin-bottom:12px;margin-top:auto}
.prod-price small{font-size:0.72rem;color:var(--c-text-light);font-weight:400}
.prod-btn{width:100%;padding:10px;border:1px solid var(--c-primary);color:var(--c-primary);background:transparent;border-radius:var(--r-btn);font-family:var(--f-heading);font-weight:600;font-size:0.82rem;cursor:pointer;transition:var(--tr);text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:6px}
.prod-btn:hover{background:var(--c-primary);color:var(--c-white)}
.prod-btn svg{width:16px;height:16px}

/* ===== Product Detail Page ===== */
.product-detail{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:flex-start}

/* Gallery */
.product-gallery{position:sticky;top:90px}
.gallery-main{border-radius:var(--r-img);overflow:hidden;background:var(--c-light);aspect-ratio:1;margin-bottom:12px;position:relative}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-main-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--c-text-lighter)}
.gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gallery-thumb{border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:var(--tr);aspect-ratio:1;background:var(--c-light)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb:hover{border-color:var(--c-primary)}
.gallery-thumb.active{border-color:var(--c-primary)}

/* Product info */
.product-info h1{font-size:1.6rem;line-height:1.3;margin-bottom:12px}
.product-info .product-brand{font-size:0.9rem;color:var(--c-text-light);margin-bottom:16px}
.product-info .product-brand strong{color:var(--c-dark)}
.product-info .product-price-box{background:var(--c-light);border-radius:var(--r-card);padding:20px;margin-bottom:24px}
.product-info .product-price-box .label{font-size:0.8rem;color:var(--c-text-light);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.product-info .product-price-box .price{font-family:var(--f-mono);font-size:1.5rem;font-weight:700;color:var(--c-primary)}
.product-info .product-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.product-info .meta-item{padding:12px 16px;background:var(--c-light);border-radius:var(--r-btn)}
.product-info .meta-item .label{font-size:0.75rem;color:var(--c-text-light);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.product-info .meta-item .value{font-size:0.9rem;font-weight:600;color:var(--c-dark)}

/* Inquiry form sidebar on product page */
.product-inquiry-form{background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-card);padding:28px;position:sticky;top:90px;box-shadow:var(--sh-sm)}
.product-inquiry-form h3{font-size:1.1rem;margin-bottom:8px}
.product-inquiry-form .form-intro{font-size:0.85rem;color:var(--c-text-light);margin-bottom:20px}

/* Specs table */
.specs-table{width:100%;border-collapse:collapse;margin-bottom:32px}
.specs-table th{background:var(--c-dark);color:var(--c-white);padding:12px 16px;text-align:left;font-family:var(--f-heading);font-weight:600;font-size:0.88rem;width:200px}
.specs-table td{padding:12px 16px;border-bottom:1px solid var(--c-border);font-size:0.9rem}
.specs-table tr:nth-child(even) td{background:var(--c-light)}

/* Features grid on product page */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:40px}
.feature-item{display:flex;gap:16px;align-items:flex-start}
.feature-item .feature-icon{width:48px;height:48px;flex-shrink:0;background:var(--c-primary-alpha);border-radius:12px;display:flex;align-items:center;justify-content:center}
.feature-item .feature-icon svg{width:24px;height:24px;color:var(--c-primary)}
.feature-item h4{font-size:0.95rem;margin-bottom:6px}
.feature-item p{font-size:0.85rem;color:var(--c-text-light);line-height:1.6}

/* Applications section */
.applications-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:32px}
.application-tag{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:var(--c-light);border-radius:var(--r-pill);font-size:0.85rem;color:var(--c-dark);font-weight:500;border:1px solid var(--c-border)}
.application-tag svg{width:16px;height:16px;color:var(--c-primary)}

/* Related products */
.related-products{margin-top:48px;padding-top:48px;border-top:1px solid var(--c-border)}

/* Video section */
.product-video{border-radius:var(--r-img);overflow:hidden;margin-bottom:32px;background:var(--c-dark)}
.product-video video{width:100%;display:block}
.product-video-placeholder{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--c-white);font-size:1.1rem}

/* Product tabs (optional, for long product pages) */
.product-tabs{margin-bottom:32px}
.product-tabs .tabs-nav{display:flex;gap:0;border-bottom:2px solid var(--c-border);margin-bottom:24px}
.product-tabs .tab-link{padding:12px 24px;font-family:var(--f-heading);font-weight:600;font-size:0.9rem;color:var(--c-text-light);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--tr)}
.product-tabs .tab-link.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.product-tabs .tab-content{display:none}
.product-tabs .tab-content.active{display:block}
