/* Page-scoped styles for product.php */
body.page-product .hero.auth-hero {
  padding: 30px 20px;
  margin-bottom: 10px;
}

.form-panel.product-panel {
  max-width: 1300px;
  margin: 24px auto;
  padding: 24px;
  box-sizing: border-box;
  display: grid;
  /* thumbnail column | main image | details | buybox */
  grid-template-columns: 120px 420px 1fr 360px;
  gap: 20px;
  align-items: start;
}

.form-panel.product-panel .product-thumb { grid-column: 2; display:flex; align-items:center; justify-content:center; border-radius:12px; overflow:hidden; background:#f6f6f6; padding:12px; height:420px; }
.form-panel.product-panel .product-thumb img { display:block; object-fit:contain; width:100%; height:100%; border-radius:8px; }

/* vertical thumbnail list */
.form-panel.product-panel .thumb-list { grid-column: 1; display:flex; flex-direction:column; gap:10px; align-items:center; }
.form-panel.product-panel .thumb-item { width:88px; height:88px; border-radius:8px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,0.06); cursor:pointer; }
.form-panel.product-panel .thumb-item img { width:100%; height:100%; object-fit:cover; display:block; }
.form-panel.product-panel .thumb-item.active { box-shadow: 0 6px 20px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.08); }

.product-panel h2 { margin-top: 0; }

/* center column: details */
.form-panel.product-panel .description,
.form-panel.product-panel h2,
.form-panel.product-panel .product-body { grid-column: 3; }

.product-buybox { grid-column: 4; background: var(--panel-bg,#fff); border:1px solid rgba(0,0,0,0.06); padding:16px; border-radius:12px; box-sizing:border-box; align-self:start; position:sticky; top:84px; }
.product-buybox .buybox-price { font-size:1.25rem; font-weight:800; margin-bottom:10px; color: var(--primary-light); }
.product-buybox .buybox-controls { display:flex; gap:8px; align-items:center; }
.product-buybox .buy-qty { width:84px; padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); box-sizing:border-box; }
.product-buybox .buy-btn { flex:1; }
.product-buybox .muted.small { margin-top:8px; display:block; }

/* Make buybox buttons and colors follow theme variables */
.product-buybox .btn-primary {
  background: linear-gradient(90deg, var(--primary-light), var(--accent-light));
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
}
.product-buybox .btn-primary:active { transform: translateY(0); }

/* Dark theme overrides */
body.dark .product-buybox {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.04);
}
body.dark .quick-help-panel {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
body.dark .form-panel.product-panel {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
body.dark .form-panel.product-panel .product-thumb {
  background: rgba(255,255,255,0.05);
}
body.dark .form-panel.product-panel .thumb-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
body.dark .form-panel.product-panel,
body.dark .form-panel.product-panel .product-body,
body.dark .form-panel.product-panel .product-body h2,
body.dark .form-panel.product-panel .product-body h3,
body.dark .form-panel.product-panel .product-body p,
body.dark .form-panel.product-panel .product-specs,
body.dark .form-panel.product-panel .product-specs li,
body.dark .form-panel.product-panel .product-specs strong {
  color: var(--text-dark);
}
body.dark .form-panel.product-panel .muted,
body.dark .product-buybox .muted.small,
body.dark .buybox-trust-item {
  color: rgba(229,229,231,0.9);
}
body.dark .product-buybox .buybox-price { color: var(--primary-dark); }
body.dark .product-buybox .btn-primary {
  background: linear-gradient(90deg, var(--primary-dark), var(--accent-dark));
  color: var(--text-dark);
}

/* Ensure description column doesn't collapse and long text wraps */
.form-panel.product-panel .description { white-space:normal; word-break:break-word; }

@media (max-width:900px) {
  .form-panel.product-panel { grid-template-columns: 1fr; padding:16px; gap:18px; }
  .product-buybox { width:100%; }
  .product-buybox .buybox-controls { flex-direction: column; align-items: stretch; }
  .product-buybox .buy-qty { width: 100%; max-width: none; }
  .product-buybox .buy-btn { width: 100%; }
}