/* ============================================================
   SQUIDTRONIC — Product Detail Page
   ============================================================ */

/* ---------- Product Detail ---------- */
.pd-wrap{max-width:var(--container);margin:0 auto;padding:16px}
.pd{display:grid;grid-template-columns:1fr 1fr;background:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden}
.pd__gallery{position:relative;padding:40px;background:var(--c-bg);display:flex;align-items:center;justify-content:center}
.pd__gallery-main{width:100%;max-width:400px;aspect-ratio:1;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}
.pd__badge{position:absolute;top:16px;left:16px;padding:4px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--c-accent);color:var(--c-brand)}
.pd__info{padding:40px}
.pd__category{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--c-accent-dark);margin-bottom:8px}
.pd__title{font-size:var(--text-3xl);font-weight:800;line-height:1.2;margin-bottom:8px}
.pd__sku{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--c-text-dim);margin-bottom:16px}
.pd__price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.pd__price{font-size:var(--text-3xl);font-weight:800}
.pd__price-range{font-size:var(--text-sm);color:var(--c-text-dim)}
.pd__stock{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;margin-bottom:20px}
.pd__stock--in{background:#dcfce7;color:#15803d}
.pd__desc{font-size:var(--text-base);color:var(--c-text-mid);line-height:1.7;margin-bottom:24px}
.pd__specs{margin-bottom:24px}
.pd__specs-title{font-size:var(--text-base);font-weight:700;margin-bottom:12px}
.pd__specs-table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:var(--text-sm)}
.pd__specs-table tr{border-bottom:1px solid var(--c-border-light)}
.pd__specs-table td{padding:8px 0}
.pd__specs-table td:first-child{color:var(--c-text-dim);font-weight:500;width:140px}
.pd__specs-table td:last-child{color:var(--c-text);font-weight:600;font-family:var(--font-mono)}
.pd__actions{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.pd__qty-wrap{display:flex;align-items:center;gap:10px}
.pd__qty-label{font-size:var(--text-sm);font-weight:600;color:var(--c-text-mid)}
.pd__qty{display:flex;align-items:center;border:1px solid var(--c-border);border-radius:var(--radius-md);overflow:hidden}
.pd__qty-btn{width:36px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:700;background:var(--c-bg);transition:background .15s}
.pd__qty-btn:hover{background:var(--c-border)}
.pd__qty-input{width:48px;height:40px;text-align:center;border:none;border-left:1px solid var(--c-border);border-right:1px solid var(--c-border);font-weight:600;font-size:var(--text-base);background:var(--c-bg-white)}
.pd__qty-input:focus{outline:none}
.pd__add-btn{flex:1;padding:10px 24px;border-radius:var(--radius-md);background:var(--c-cart-green);color:#fff;font-size:var(--text-base);font-weight:700;transition:background .15s,transform .1s;text-align:center}
.pd__add-btn:hover{background:var(--c-cart-hover)}
.pd__add-btn:active{transform:scale(.98)}
.pd__add-btn--added{background:var(--c-info)}
.pd__features{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px;background:var(--c-bg);border-radius:var(--radius-lg)}
.pd__feature{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--c-text-mid)}
.pd__feature svg{width:16px;height:16px;color:var(--c-cart-green);flex-shrink:0}
.pd__perks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.pd__perk{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--c-text-mid)}
.pd__perk svg{color:var(--c-cart-green);flex-shrink:0}

.pd-related{margin-top:40px;padding-top:40px;border-top:1px solid var(--c-border)}
.pd-related__title{font-size:var(--text-2xl);font-weight:800;margin-bottom:20px}

@media(max-width:768px){
  .pd{grid-template-columns:1fr}
  .pd__gallery{padding:24px}
  .pd__info{padding:24px}
  .pd__title{font-size:var(--text-2xl)}
  .pd__actions{flex-direction:column}
  .pd__add-btn{width:100%}
  .pd__features{grid-template-columns:1fr}
}

/* ---------- Tabs ---------- */
.tabs{margin-top:24px}
.tabs__nav{display:flex;border-bottom:2px solid var(--c-border)}
.tabs__btn{padding:12px 20px;font-size:var(--text-sm);font-weight:600;color:var(--c-text-dim);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.tabs__btn:hover{color:var(--c-text)}
.tabs__btn.active{color:var(--c-accent-dark);border-bottom-color:var(--c-accent)}
.tabs__panel{display:none;padding:24px 0}
.tabs__panel.active{display:block}