/* ===== Product Detail Page Styles ===== */
.product-detail-page{padding:0;background:var(--white)}
.product-detail{padding:40px 0 60px}
.product-detail .container{max-width:var(--max-width)}

/* ===== Product Detail Layout ===== */
.product-detail-layout{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:992px){.product-detail-layout{grid-template-columns:1fr 1fr;gap:50px}}

/* ===== Product Gallery ===== */
.product-gallery{position:relative}
.product-gallery .main-image{position:relative;padding-bottom:75%;overflow:hidden;background:var(--bg);border-radius:var(--radius-lg);border:1px solid var(--border)}
.product-gallery .main-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;padding:20px}
.product-gallery .thumbnails{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.product-gallery .thumbnails .thumb-item{padding-bottom:100%;position:relative;background:var(--bg);border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all var(--transition);overflow:hidden}
.product-gallery .thumbnails .thumb-item:hover{border-color:var(--border)}
.product-gallery .thumbnails .thumb-item.active{border-color:var(--primary)}
.product-gallery .thumbnails .thumb-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;padding:6px}

/* ===== Product Info ===== */
.product-info .product-title{font-size:clamp(1.3rem,2.5vw,1.8rem);color:var(--primary-dark);font-weight:700;margin-bottom:12px;line-height:1.3}
.product-info .product-features{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.product-info .product-features li{display:flex;align-items:flex-start;gap:10px;font-size:0.9rem;color:var(--text-light);line-height:1.5;padding:4px 0}
.product-info .product-features li .check{color:var(--success);font-weight:700;flex-shrink:0}
.product-info .product-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.product-info .product-actions .btn{padding:12px 32px;font-size:0.95rem}
.product-info .product-note{font-size:0.85rem;color:var(--text-light);line-height:1.6;padding:14px 16px;background:var(--bg);border-radius:var(--radius);border-left:3px solid var(--accent)}
.product-info .product-note a{color:var(--primary);text-decoration:underline}
.product-info .product-note a:hover{color:var(--primary-light)}

/* ===== Product Tabs ===== */
.product-tabs{margin-top:50px;padding-top:40px;}
.product-tabs .tabs-nav{display:flex;gap:0;border-bottom:2px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}
.product-tabs .tabs-nav .tab-btn{padding:12px 24px;background:none;border:none;font-size:0.95rem;font-weight:600;color:var(--text-light);cursor:pointer;transition:all var(--transition);border-bottom:3px solid transparent;white-space:nowrap}
.product-tabs .tabs-nav .tab-btn:hover{color:var(--primary)}
.product-tabs .tabs-nav .tab-btn.active{color:var(--primary);border-bottom-color:var(--accent)}
.product-tabs .tabs-content{padding:24px 0}
.product-tabs .tabs-content .tab-pane{display:none}
.product-tabs .tabs-content .tab-pane.active{display:block}
.product-tabs .tabs-content h2{font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--primary-dark);margin:20px 0 12px}
.product-tabs .tabs-content h3{font-size:1rem;color:var(--primary);margin:16px 0 10px}
.product-tabs .tabs-content h4{font-size:0.95rem;color:var(--primary-dark);margin:12px 0 6px}
.product-tabs .tabs-content p{color:var(--text-light);line-height:1.8;margin-bottom:12px}
.product-tabs .tabs-content ul,.product-tabs .tabs-content ol{padding-left:24px;margin-bottom:12px;color:var(--text-light);line-height:1.8}
.product-tabs .tabs-content ul li,.product-tabs .tabs-content ol li{margin-bottom:4px}
.product-tabs .tabs-content ul li{list-style:disc}
.product-tabs .tabs-content ol li{list-style:decimal}
.product-tabs .tabs-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:0.9rem}
.product-tabs .tabs-content table th,.product-tabs .tabs-content table td{padding:10px 14px;border:1px solid var(--border);text-align:left}
.product-tabs .tabs-content table th{background:var(--primary-dark);color:var(--white);font-weight:600}
.product-tabs .tabs-content table tr:nth-child(even){background:var(--bg)}
.product-tabs .tabs-content table tr:hover{background:#eef4f8}
.product-tabs .tabs-content img{max-width:100%;height:auto;border-radius:var(--radius);margin:16px 0;box-shadow:var(--shadow)}
.product-tabs .tabs-content .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== Navigation ===== */
.product-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;padding-top:30px;border-top:1px solid var(--border)}
.product-nav .nav-item{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--text-light)}
.product-nav .nav-item .label{font-weight:500;color:var(--text);flex-shrink:0}
.product-nav .nav-item a{color:var(--primary);transition:color var(--transition);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.product-nav .nav-item a:hover{color:var(--primary-light)}
.product-nav .nav-item.nav-prev{justify-content:flex-start}
.product-nav .nav-item.nav-next{justify-content:flex-end;text-align:right}

/* ===== Related Products ===== */
.related-products{margin-top:50px;padding-top:40px;border-top:2px solid var(--border)}
.related-products .related-title{font-size:1.2rem;font-weight:600;color:var(--primary-dark);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.related-products .related-title::after{content:'';flex:1;height:1px;background:var(--border)}
.related-products .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:576px){.related-products .related-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.related-products .related-grid{grid-template-columns:repeat(4,1fr)}}
.related-products .related-item{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:all var(--transition)}
.related-products .related-item:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);border-color:var(--primary)}
.related-products .related-item .ri-img{position:relative;padding-bottom:65%;overflow:hidden;background:var(--bg)}
.related-products .related-item .ri-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition)}
.related-products .related-item:hover .ri-img img{transform:scale(1.05)}
.related-products .related-item .ri-body{padding:12px 14px 14px}
.related-products .related-item .ri-title{font-size:0.85rem;font-weight:500;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.related-products .related-item .ri-title a{color:var(--text);transition:color var(--transition)}
.related-products .related-item .ri-title a:hover{color:var(--primary)}
.related-products .related-item .ri-more{font-size:0.7rem;color:var(--primary);display:inline-block;margin-top:4px}

/* ===== Responsive ===== */
@media(max-width:575px){.product-detail{padding:20px 0 30px}.product-gallery .main-image{padding-bottom:70%}.product-gallery .thumbnails{gap:6px}.product-info .product-title{font-size:1.2rem}.product-info .product-actions .btn{padding:10px 20px;font-size:0.85rem;flex:1;text-align:center}.product-tabs{margin-top:30px;padding-top:20px}.product-tabs .tabs-nav .tab-btn{padding:10px 14px;font-size:0.8rem}.product-tabs .tabs-content{padding:16px 0}.product-nav{grid-template-columns:1fr;gap:10px}.product-nav .nav-item.nav-next{justify-content:flex-start;text-align:left}.related-products{margin-top:30px;padding-top:20px}.related-products .related-grid{grid-template-columns:1fr 1fr;gap:12px}.related-products .related-item .ri-body{padding:10px 12px 12px}.related-products .related-item .ri-title{font-size:0.8rem}}

@media(min-width:768px){.product-detail{padding:50px 0 70px}}