/* ═══════════════════════════════════════════════
   DETAIL PAGE
   ═══════════════════════════════════════════════ */
.detail-bc{padding:14px 0;font-size:11px;color:var(--g400)}
.detail-bc a{color:var(--g500);transition:.15s}.detail-bc a:hover{color:var(--dark)}
.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-bottom:48px}
/* Gallery */
.detail-gallery{display:grid;grid-template-columns:72px 1fr;gap:10px}
.detail-thumbs{display:flex;flex-direction:column;gap:8px;max-height:500px;overflow-y:auto}
.detail-thumb{width:72px;height:72px;border-radius:var(--radius);overflow:hidden;border:2px solid transparent;cursor:pointer;position:relative;flex-shrink:0;transition:.2s}
.detail-thumb:hover,.detail-thumb.act{border-color:var(--dark)}
.detail-thumb .bgc{background-size:cover;background-position:center}
.detail-main-img{aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;position:relative;cursor:zoom-in;background:var(--g50)}
.detail-main-img .bgc{transition:transform .3s}
.detail-main-img:hover .bgc{transform:scale(1.02)}
.detail-main-img__nav{position:absolute;bottom:12px;right:12px;display:flex;gap:4px}
.detail-main-img__nav button{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;transition:.2s}
.detail-main-img__nav button:hover{background:var(--white);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.detail-main-img__nav svg{width:14px;height:14px;stroke:var(--dark);fill:none;stroke-width:2}
/* Info */
.detail-info__tag{font-family:var(--font-h);font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.detail-info h1{font-family:var(--font-h);font-size:clamp(22px,2.5vw,28px);font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1.15;margin-bottom:8px}
.detail-sku{font-size:12px;color:var(--g400);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.detail-sku svg{width:12px;height:12px;stroke:var(--g400);fill:none;stroke-width:2}
/* Color picker */
.detail-colors label,.detail-sizes label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--g600);display:block;margin-bottom:8px}
.detail-colors{margin-bottom:18px}
.detail-colors__row{display:flex;gap:8px}
.color-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--g200);cursor:pointer;transition:.2s}
.color-dot:hover,.color-dot.act{border-color:var(--dark);transform:scale(1.12)}
/* Size picker */
.detail-sizes{margin-bottom:20px}
.detail-sizes__row{display:flex;gap:6px;flex-wrap:wrap}
.size-btn{padding:7px 16px;border:1px solid var(--g200);border-radius:var(--radius);font-family:var(--font-h);font-size:12px;font-weight:500;color:var(--g600);cursor:pointer;transition:.2s}
.size-btn:hover,.size-btn.act{border-color:var(--dark);color:var(--dark);background:var(--g50)}
/* Price table */
.detail-price{margin-bottom:22px}
.detail-price h4{font-family:var(--font-h);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;color:var(--g600)}
.price-table{width:100%;border-collapse:collapse}
.price-table th{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--g400);font-weight:600;text-align:left;padding:8px 12px;background:var(--g50);border-bottom:1px solid var(--g200)}
.price-table td{padding:9px 12px;font-size:13px;border-bottom:1px solid var(--g100)}
.price-table td:last-child{font-family:var(--font-h);font-weight:600;color:var(--red)}
.price-table tr:hover td{background:var(--g50)}
.price-table tr.best{background:rgba(253,216,53,.08)}
.price-table tr.best td:last-child{position:relative}
.price-table tr.best td:last-child::after{content:'BEST';font-size:8px;letter-spacing:1px;background:var(--red);color:var(--white);padding:1px 5px;border-radius:2px;margin-left:6px;vertical-align:middle}
/* Action buttons */
.detail-actions{display:flex;gap:10px;margin-bottom:18px}
.detail-actions .btn{flex:1;justify-content:center;padding:14px 16px;font-size:12px;letter-spacing:1.5px}
.detail-actions .btn svg{width:16px;height:16px}
.detail-actions .btn--red svg{stroke:var(--white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.detail-actions .btn--green svg{fill:var(--white);stroke:none}
/* Meta info */
.detail-meta{display:flex;gap:18px;font-size:11px;color:var(--g400);flex-wrap:wrap;margin-bottom:8px}
.detail-meta span{display:flex;align-items:center;gap:4px}
.detail-meta svg{width:13px;height:13px;stroke:var(--g400);fill:none;stroke-width:2}
/* Consultation box */
.consult-box{border-radius:var(--radius-lg);padding:24px 20px;text-align:center;margin-top:20px;background:var(--g50);border:1px solid var(--g200);transition:border-color .3s,box-shadow .3s}
.consult-box:hover{border-color:var(--red);box-shadow:0 4px 20px rgba(214,35,46,.08)}
.consult-box__top{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.consult-box__top svg{width:28px;height:28px;stroke:var(--red);fill:none;stroke-width:1.5;flex-shrink:0}
.consult-box h4{font-family:var(--font-h);font-size:14px;font-weight:600;margin-bottom:4px;color:var(--dark)}
.consult-box p{font-size:12px;color:var(--g500);margin-bottom:14px}
.consult-box .btn{padding:10px 28px;font-size:11px;border-radius:20px}
.consult-box .online{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--green);font-weight:600}
.consult-box .online::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Tabs */
.detail-tabs{border-top:1px solid var(--g200);padding:36px 0 48px}
.detail-tabs__nav{display:flex;border-bottom:2px solid var(--g100);margin-bottom:28px}
.detail-tabs__btn{padding:12px 28px;font-family:var(--font-h);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--g400);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.2s}
.detail-tabs__btn:hover{color:var(--g600)}
.detail-tabs__btn.act{color:var(--dark);border-bottom-color:var(--red)}
.tab-panel{display:none;font-size:14px;color:var(--g600);line-height:1.85}
.tab-panel.act{display:block}
.tab-panel h4{font-family:var(--font-h);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;color:var(--dark)}
.tab-panel p{margin-bottom:14px}
.tab-panel ul{padding-left:20px;list-style:disc;margin-bottom:14px}
.tab-panel li{margin-bottom:5px}
.spec-table{width:100%;border-collapse:collapse;margin-bottom:18px}
.spec-table tr{border-bottom:1px solid var(--g100)}
.spec-table td{padding:9px 14px;font-size:13px}
.spec-table td:first-child{color:var(--g400);width:140px}
.spec-table td:last-child{color:var(--dark);font-weight:500}

/* Related products */
.related-sec{padding:36px 0 56px}
.related-sec h3{font-family:var(--font-h);font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:24px;display:flex;align-items:center;gap:12px}
.related-sec h3::after{content:'';flex:1;height:1px;background:var(--g200)}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* Stock status */
.detail-stock{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.5px;vertical-align:middle}
.detail-stock--in-stock{background:#dcfce7;color:#166534}
.detail-stock--made-to-order{background:#fef3c7;color:#92400e}
.detail-stock--out-of-stock{background:#fee2e2;color:#991b1b}

/* Price note */
.detail-price__note{font-size:12px;color:var(--g400);font-style:italic;margin-top:6px}

/* Highlights */
.detail-highlights{margin-bottom:18px;padding:16px 20px;background:var(--g50);border-radius:8px;border-left:3px solid var(--red)}
.detail-highlights h4{margin-bottom:8px}
.detail-highlights ul{padding-left:18px;margin-bottom:0}
.detail-highlights li{margin-bottom:4px;color:var(--dark);font-size:13px}

/* Share buttons */
.detail-share{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--g200)}
.detail-share__label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--g400)}
.detail-share__btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;color:var(--g500);transition:.2s;background:none;cursor:pointer;text-decoration:none}
.detail-share__btn:hover{background:var(--g100);color:var(--dark);border-color:var(--g300)}
.detail-share__btn.copied{background:var(--green);color:var(--white);border-color:var(--green)}