/* product-detail.css — VEVOR-style B2B product detail template for Entrol Fishing
   Reuses site CSS variables from styles.css. Only template-specific components live here. */

/* ---------- hero (two-column on desktop, stacked on mobile) ---------- */
.pd-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}
@media(max-width:760px){.pd-hero-grid{grid-template-columns:1fr;gap:20px}}

/* gallery */
.pd-gallery{margin:0}
.pd-main{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--color-bg-alt);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);display:block}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-thumb{width:84px;height:64px;object-fit:cover;border:2px solid transparent;border-radius:8px;
  cursor:pointer;background:var(--color-bg-alt);padding:0}
.pd-thumb.active{border-color:var(--color-primary)}
.pd-thumb:hover{filter:brightness(.96)}

/* info column */
.pd-info .eyebrow{display:block;margin-bottom:8px}
.pd-info h1{margin:0 0 14px;font-size:1.7rem;line-height:1.2}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pd-tag{font-size:.8rem;padding:4px 12px;border-radius:999px;background:var(--color-bg-alt);
  color:var(--color-primary);border:1px solid var(--color-border);font-weight:600}
.pd-intro{color:var(--color-text-mid);font-size:1.02rem;margin:0 0 16px;max-width:46ch}
.pd-keys{margin:0 0 16px;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:16px 18px;background:var(--color-white);box-shadow:var(--shadow-sm)}
.pd-keys h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-light);
  margin:0 0 10px;font-weight:700}
.pd-keys ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.pd-keys li{font-size:.92rem;color:var(--color-text-mid)}
.pd-oem-badge{display:inline-block;background:var(--color-primary);color:#fff;font-size:.82rem;
  font-weight:600;padding:6px 14px;border-radius:999px;margin:0 0 14px}
.pd-btn-row{display:flex;flex-wrap:wrap;gap:12px}
.pd-btn-row .btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;
  font-weight:600;border-radius:var(--radius);text-decoration:none}

/* ---------- section heading helper ---------- */
.pd-h{font-size:1.35rem;margin:0 0 6px}
.pd-sub{color:var(--color-text-mid);margin:0 0 16px;max-width:70ch}

/* ---------- model chips ---------- */
.pd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.pd-chip{padding:8px 14px;border:1.5px solid var(--color-border);border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--color-primary);background:var(--color-white);
  cursor:pointer;transition:all .18s var(--ease);font-family:inherit}
.pd-chip:hover{border-color:var(--color-primary)}
.pd-chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* ---------- selling-point blocks ---------- */
.pd-points{display:grid;gap:22px;margin-top:8px}
.pd-point{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:22px;align-items:center;
  background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:18px;box-shadow:var(--shadow-sm)}
@media(max-width:760px){.pd-point{grid-template-columns:1fr;gap:14px}}
.pd-point img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--color-bg-alt)}
.pd-point h3{margin:0 0 8px;font-size:1.15rem}
.pd-point p{color:var(--color-text-mid);margin:0 0 12px;line-height:1.55}
.pd-oem-note{font-size:.82rem;color:var(--color-primary);font-weight:600;background:var(--color-bg-alt);
  display:inline-block;padding:5px 11px;border-radius:6px}

/* ---------- OEM configurable options ---------- */
.pd-oem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media(max-width:760px){.pd-oem-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.pd-oem-grid{grid-template-columns:1fr}}
.pd-oem-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;background:var(--color-white);
  box-shadow:var(--shadow-sm)}
.pd-oem-card h4{margin:0 0 10px;font-size:1rem;color:var(--color-text)}
.pd-oem-card .opt{display:block;font-size:.88rem;color:var(--color-text-mid);padding:4px 0;
  border-top:1px dashed var(--color-border)}
.pd-oem-card .opt:first-of-type{border-top:none}

/* ---------- spec table ---------- */
.pd-spec-wrap{overflow-x:auto;margin-top:8px;border:1px solid var(--color-border);border-radius:var(--radius-lg)}
table.pd-spec{width:100%;border-collapse:collapse;min-width:680px}
.pd-spec th,.pd-spec td{padding:11px 14px;border-bottom:1px solid var(--color-border);text-align:left;
  font-size:.9rem;white-space:nowrap}
.pd-spec thead th{background:var(--color-bg-alt);color:var(--color-text);font-weight:700;position:sticky;top:0}
.pd-spec tbody tr{cursor:pointer;transition:background .15s}
.pd-spec tbody tr:hover{background:var(--color-bg-alt)}
.pd-spec tbody tr.active{background:rgba(14,110,140,.10)}
.pd-spec tbody tr:last-child td{border-bottom:none}

/* ---------- FAQ ---------- */
.pd-faq{max-width:840px;margin-top:8px}
.pd-faq-item{border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:10px;
  background:var(--color-white);overflow:hidden}
.pd-faq-q{width:100%;text-align:left;background:none;border:none;padding:15px 17px;font-size:.98rem;
  font-weight:600;color:var(--color-text);cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-family:inherit}
.pd-faq-q .pm{color:var(--color-primary);font-size:1.35rem;line-height:1;transition:transform .2s var(--ease);flex:none}
.pd-faq-item.open .pm{transform:rotate(45deg)}
.pd-faq-a{padding:0 17px 15px;color:var(--color-text-mid);font-size:.92rem;line-height:1.6;display:none}
.pd-faq-item.open .pd-faq-a{display:block}

/* ---------- related ---------- */
.pd-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.pd-related-chip{padding:7px 15px;border:1px solid var(--color-border);border-radius:999px;font-size:.88rem;
  color:var(--color-primary);background:var(--color-white);text-decoration:none;font-weight:600;transition:all .18s var(--ease)}
.pd-related-chip:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}