/* =================== PRODUCT DETAIL =================== */
.pd-section{padding:40px 0 70px}
.pd-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}

.pd-gallery{position:sticky;top:90px}
.pd-main-img{aspect-ratio:1;background:linear-gradient(135deg,#f8fafc,#eef2f7);border-radius:18px;display:grid;place-items:center;font-size:180px;color:var(--primary);position:relative;overflow:hidden;border:1px solid var(--border)}
.pd-main-img .tag{position:absolute;top:18px;left:18px;background:var(--danger);color:#fff;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pd-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.pd-thumbs .thumb{aspect-ratio:1;background:#fff;border:2px solid var(--border);border-radius:10px;display:grid;place-items:center;cursor:pointer;font-size:30px;color:var(--primary);transition:.2s}
.pd-thumbs .thumb:hover,.pd-thumbs .thumb.active{border-color:var(--primary)}

.pd-info .cat{color:var(--primary);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.pd-info h1{font-size:30px;line-height:1.3;margin-bottom:14px}
.pd-rating{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pd-rating .stars{color:#fbbf24;font-size:18px}
.pd-rating .sep{color:var(--border)}

.pd-price-box{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;border-radius:14px;padding:24px;margin-bottom:24px}
.pd-price{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.pd-price .now{font-size:36px;font-weight:900;color:var(--primary);line-height:1}
.pd-price .old{font-size:18px;color:var(--muted);text-decoration:line-through}
.pd-price .save{padding:4px 12px;background:var(--danger);color:#fff;border-radius:6px;font-size:13px;font-weight:700}
.pd-price-box .vat{font-size:13px;color:#9a3412}

.pd-meta{margin-bottom:24px}
.pd-meta .row{display:flex;gap:12px;padding:10px 0;font-size:14px;border-bottom:1px dashed var(--border)}
.pd-meta .row .lbl{min-width:130px;color:var(--muted);font-weight:500}
.pd-meta .row .val{color:var(--dark);font-weight:600}
.pd-meta .stock-in{color:var(--success)}

.pd-qty{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.qty-input{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.qty-input button{width:42px;height:42px;background:#fff;font-size:18px;font-weight:600;color:var(--dark);transition:.2s}
.qty-input button:hover{background:var(--bg)}
.qty-input input{width:54px;height:42px;text-align:center;border:none;font-weight:700;font-size:15px}

.pd-actions{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.pd-actions .btn{flex:1;min-width:180px;padding:15px 24px}

.pd-perks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:var(--bg);padding:18px;border-radius:12px}
.pd-perks .perk{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.pd-perks .perk .ic{width:36px;height:36px;border-radius:8px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:18px;flex-shrink:0}

/* Tabs section */
.pd-tabs-section{background:#fff;padding-bottom:60px}
.pd-tab-nav{display:flex;gap:6px;border-bottom:2px solid var(--border);margin-bottom:30px;overflow-x:auto}
.pd-tab-nav button{padding:14px 22px;font-weight:700;color:var(--muted);transition:.2s;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.pd-tab-nav button:hover{color:var(--primary)}
.pd-tab-nav button.active{color:var(--primary);border-bottom-color:var(--primary)}
.pd-tab-panel{display:none;animation:fadeIn .3s ease}
.pd-tab-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pd-description{max-width:800px;font-size:15px;color:var(--text)}
.pd-description h3{margin:24px 0 12px;font-size:20px}
.pd-description ul{padding-left:20px;list-style:disc}
.pd-description li{margin-bottom:6px}

.pd-specs-table{width:100%;border-collapse:collapse;max-width:800px}
.pd-specs-table tr{border-bottom:1px solid var(--border)}
.pd-specs-table td{padding:14px 16px;font-size:14px}
.pd-specs-table td:first-child{font-weight:600;color:var(--dark);width:30%;background:var(--bg)}
.pd-specs-table td:last-child{color:var(--text-2)}

.pd-reviews{max-width:800px}
.review-summary{display:grid;grid-template-columns:auto 1fr;gap:30px;padding:24px;background:var(--bg);border-radius:14px;margin-bottom:24px;align-items:center}
.review-summary .big{text-align:center}
.review-summary .big .num{font-size:48px;font-weight:900;color:var(--primary);line-height:1}
.review-summary .big .stars{color:#fbbf24;font-size:18px;margin:6px 0}
.review-summary .big .total{font-size:13px;color:var(--muted)}
.bar-rows .row{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:13px}
.bar-rows .row .lbl{min-width:36px}
.bar-rows .row .bar{flex:1;height:8px;background:#fff;border-radius:4px;overflow:hidden}
.bar-rows .row .fill{height:100%;background:#fbbf24}

.review-item{padding:20px 0;border-bottom:1px solid var(--border)}
.review-item .head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.review-item .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#ff8a4c);color:#fff;display:grid;place-items:center;font-weight:800}
.review-item strong{display:block;color:var(--dark)}
.review-item .date{font-size:12px;color:var(--muted)}
.review-item .stars{color:#fbbf24;font-size:14px;margin-left:auto}
.review-item p{font-size:14px;color:var(--text)}

/* Related */
.related-section{background:var(--bg);padding:60px 0}
.related-section h2{margin-bottom:24px;font-size:24px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

@media (max-width:992px){
  .pd-grid{grid-template-columns:1fr}
  .pd-gallery{position:static}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .pd-main-img{font-size:120px}
  .pd-actions .btn{min-width:100%}
  .related-grid{grid-template-columns:1fr}
}