/* ============================================
   CAR-LUNGI PRODUCT DETAIL PAGE — Amazon-style
   ============================================ */

/* Breadcrumb */
.breadcrumb{padding:12px 0;font-size:13px;color:var(--muted)}
.breadcrumb a{color:var(--brand);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 6px;color:#555}

/* Product Layout */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:20px 0 40px;align-items:start}

/* ---- IMAGE GALLERY ---- */
.gallery{position:sticky;top:100px}
.gallery-main{width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#1a1d21;border:1px solid var(--line);cursor:zoom-in;position:relative}
.gallery-main img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gallery-main:hover img{transform:scale(1.05)}
.gallery-main .zoom-hint{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.7);color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;opacity:0;transition:opacity .3s}
.gallery-main:hover .zoom-hint{opacity:1}

.gallery-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.gallery-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:border-color .2s,transform .2s;background:#1a1d21}
.gallery-thumbs img:hover,.gallery-thumbs img.active{border-color:var(--brand);transform:scale(1.05)}

/* Nav arrows on gallery */
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .2s}
.gallery-nav:hover{background:rgba(255,43,43,.8)}
.gallery-nav.prev{left:10px}
.gallery-nav.next{right:10px}

/* ---- PRODUCT INFO ---- */
.product-info-panel h1{font-size:26px;font-weight:800;line-height:1.25;margin:0 0 6px;color:var(--ink)}
.product-info-panel .subtitle{color:var(--muted);font-size:14px;margin:0 0 14px}

/* Rating */
.rating-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.stars{color:#ffa41c;font-size:16px;letter-spacing:1px}
.rating-count{color:var(--brand);font-size:14px;cursor:pointer}
.rating-count:hover{text-decoration:underline}
.bestseller-badge{background:#cc7a00;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase}

/* Price Box */
.price-box{background:linear-gradient(135deg,#1c1f23,#16181c);border:1px solid var(--line);border-radius:12px;padding:18px;margin:16px 0}
.price-box .current-price{font-size:32px;font-weight:900;color:var(--ink)}
.price-box .current-price small{font-size:14px;font-weight:400;color:var(--muted);margin-left:4px}
.price-box .mrp{color:var(--muted);font-size:14px;margin-top:4px}
.price-box .mrp s{margin-right:6px}
.price-box .discount{color:#00c853;font-weight:700;font-size:14px}
.price-box .tax-note{font-size:12px;color:var(--muted);margin-top:6px}
.price-box .emi-info{font-size:13px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

/* Delivery Info */
.delivery-info{display:flex;flex-direction:column;gap:10px;margin:16px 0;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.delivery-row{display:flex;align-items:center;gap:10px;font-size:14px}
.delivery-row .icon{font-size:18px;min-width:24px;text-align:center}
.delivery-row strong{color:var(--ink)}

/* Key Highlights */
.highlights{margin:20px 0}
.highlights h3{font-size:15px;font-weight:700;margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.highlights ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.highlights li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--ink)}
.highlights li::before{content:'✓';color:#00c853;font-weight:700;min-width:16px}

/* Compatible Cars */
.compatible-cars{margin:16px 0;padding:14px;background:#0f1318;border:1px solid var(--line);border-radius:12px}
.compatible-cars h3{font-size:14px;font-weight:700;margin:0 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.car-tags{display:flex;flex-wrap:wrap;gap:6px}
.car-tag{background:var(--card);border:1px solid var(--line);padding:5px 12px;border-radius:20px;font-size:13px;color:var(--ink);transition:border-color .2s}
.car-tag:hover{border-color:var(--brand)}

/* Buy Buttons */
.buy-actions{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.buy-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;text-decoration:none;text-align:center}
.buy-btn:hover{transform:translateY(-2px)}
.buy-btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--glow)}
.buy-btn.amazon{background:linear-gradient(135deg,#ff9900,#e68a00);color:#111}
.buy-btn.flipkart{background:linear-gradient(135deg,#2874f0,#1a5dc8);color:#fff}
.buy-btn img{height:18px}
.marketplace-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Offers */
.offers-box{margin:16px 0;padding:14px;border:1px dashed var(--brand);border-radius:12px;background:rgba(255,43,43,.05)}
.offers-box h3{font-size:14px;font-weight:700;color:var(--brand);margin:0 0 8px}
.offer-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin-bottom:6px;color:var(--ink)}
.offer-item .tag{background:var(--brand);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;white-space:nowrap}

/* ---- TABS SECTION ---- */
.product-tabs{margin:40px 0;border-top:1px solid var(--line);padding-top:30px}
.tab-nav{display:flex;gap:0;border-bottom:2px solid var(--line);margin-bottom:24px;overflow-x:auto}
.tab-nav button{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;color:var(--muted);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;margin-bottom:-2px}
.tab-nav button:hover{color:var(--ink)}
.tab-nav button.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab-panel{display:none;animation:fadeIn .3s ease}
.tab-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Description Tab */
.description-content{line-height:1.8;color:var(--ink);font-size:15px}
.description-content h3{font-size:18px;margin:24px 0 10px;color:var(--ink)}
.description-content p{margin:0 0 14px}
.description-content img{max-width:100%;border-radius:12px;margin:14px 0}

/* Specs Table */
.specs-table{width:100%;border-collapse:collapse}
.specs-table tr:nth-child(odd){background:var(--card)}
.specs-table td{padding:12px 16px;font-size:14px;border-bottom:1px solid var(--line)}
.specs-table td:first-child{color:var(--muted);font-weight:600;width:40%;white-space:nowrap}
.specs-table td:last-child{color:var(--ink)}

/* Installation Steps */
.install-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.install-step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.install-step .step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:16px;margin-bottom:10px}
.install-step h4{margin:0 0 6px;font-size:15px}
.install-step p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.install-step img{width:100%;border-radius:10px;margin-top:10px}

/* FAQ in product page */
.product-faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.product-faq summary{font-weight:600;font-size:15px;cursor:pointer;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center}
.product-faq summary::after{content:'+';font-size:20px;color:var(--brand);transition:transform .2s}
.product-faq details[open] summary::after{content:'−'}
.product-faq details p{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.7}

/* ---- RELATED PRODUCTS ---- */
.related-products{margin:40px 0;padding-top:30px;border-top:1px solid var(--line)}
.related-products h2{font-size:22px;margin:0 0 20px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.related-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;transition:border-color .2s,transform .2s;text-decoration:none;color:inherit}
.related-card:hover{border-color:var(--brand);transform:translateY(-3px)}
.related-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:10px}
.related-card h3{font-size:14px;margin:0 0 4px;font-weight:600}
.related-card .price{font-size:18px;font-weight:800;color:var(--ink)}
.related-card .price small{font-size:12px;color:var(--muted);font-weight:400}
.related-card.current{border-color:var(--brand);opacity:.6;pointer-events:none}
.related-card.current::after{content:'Currently Viewing';display:block;font-size:11px;color:var(--brand);margin-top:6px}

/* ---- TRUST BAR ---- */
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{text-align:center}
.trust-item .icon{font-size:28px;margin-bottom:6px}
.trust-item h4{font-size:13px;margin:0;color:var(--ink)}
.trust-item p{font-size:12px;margin:2px 0 0;color:var(--muted)}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .product-detail{grid-template-columns:1fr;gap:24px}
  .gallery{position:static}
  .install-steps{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .trust-bar{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:640px){
  .product-info-panel h1{font-size:20px}
  .price-box .current-price{font-size:26px}
  .tab-nav button{padding:10px 16px;font-size:13px}
  .gallery-thumbs img{width:56px;height:56px}
  .marketplace-row{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  .car-tags{gap:4px}
  .car-tag{font-size:12px;padding:4px 10px}
}