/* ============================================================
   OverviewTabs — Overview / Specifications / Reviews / Questions
   Real tabs (not an accordion). Underline active indicator,
   fade transition between panels.
   ============================================================ */

.pdp-tabs { display: flex; flex-direction: column; }

.pdp-tabs-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--pdp-border);
  padding: 0 14px;
}
.pdp-tabs-bar::-webkit-scrollbar { display: none; }

.pdp-tab-btn {
  position: relative;
  flex: none;
  padding: 14px 14px 12px;
  background: none;
  border: 0;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--pdp-muted);
  cursor: pointer;
  white-space: nowrap;
}
.pdp-tab-btn::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background var(--pdp-fade-fast) ease;
}
.pdp-tab-btn.is-active { color: var(--pdp-blue); }
.pdp-tab-btn.is-active::after { background: var(--pdp-blue); }
.pdp-tab-btn .pdp-tab-count { color: inherit; opacity: 0.7; font-weight: 700; }

.pdp-tab-panels { position: relative; }

.pdp-tab-panel {
  display: none;
  padding: 16px;
  animation: pdp-fade-in var(--pdp-fade) var(--pdp-ease) both;
}
.pdp-tab-panel.is-active { display: block; }

@media (min-width: 768px) {
  .pdp-tabs-bar { padding: 0 20px; }
  .pdp-tab-panel { padding: 20px; }
  .pdp-tab-btn { padding: 16px 18px 14px; font-size: 0.9rem; }
}

/* ---------- Section titles ---------- */
.pdp-section-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--pdp-ink);
}

/* ---------- Overview highlights grid ---------- */
.pdp-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.pdp-overview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8f9fb;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pdp-text);
}
.pdp-overview-item .material-icons-outlined {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--pdp-blue);
  background: #eaf2ff;
  border-radius: 8px;
}

.pdp-desc-block { margin-top: 18px; }

.pdp-overview-more {
  margin-top: 12px;
  border: 0;
  background: none;
  color: var(--pdp-blue);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}
.pdp-overview-more:hover { text-decoration: underline; }

/* ---------- Description ---------- */
.pdp-desc-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--pdp-text);
  white-space: pre-line;
}
.pdp-desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  overflow: hidden;
}
.pdp-desc-toggle {
  margin-top: 8px;
  border: 0;
  background: none;
  color: var(--pdp-blue);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}
.pdp-desc-toggle:hover { text-decoration: underline; }

/* ---------- Empty state ---------- */
.pdp-empty-note {
  color: var(--pdp-muted);
  font-size: 0.85rem;
  padding: 6px 0;
}