/* ============================================================================
   ProductDetailHub — global product detail page design (Elektropumpen reference).
   Edit this ONE file to update layout/styling on all ProductDetailHub pages.
   Requires /css/dropsa-design.css for --mono, --orange, --paper, etc.
   ========================================================================== */

.pdhub .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:2px;color:var(--orange-d)}
.pdhub .btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;padding:14px 24px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;font-family:inherit}
.pdhub .btn-primary{background:var(--orange);color:#fff}
.pdhub .btn-ghost{background:#fff;color:var(--ink);border:1px solid #d8cebb}
.pdhub .diamond{flex:none;width:9px;height:9px;background:var(--orange);transform:rotate(45deg)}
.pdhub .crumb{position:relative;max-width:1180px;margin:0 auto;padding:34px 40px 0;font-family:var(--mono);font-size:12px;color:#857f6f}
.pdhub .crumb .cur{color:var(--ink);font-weight:600}
.pdhub .hero{position:relative;background:radial-gradient(120% 110% at 80% 14%,#fbf9f3 0%,var(--paper) 72%);overflow:hidden;border-bottom:1px solid var(--line)}
.pdhub .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(23,21,15,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,21,15,.035) 1px,transparent 1px);background-size:40px 40px}
.pdhub .hgrid{position:relative;max-width:1180px;margin:0 auto;padding:46px 40px 66px;display:grid;grid-template-columns:1fr .92fr;gap:48px;align-items:center}
.pdhub .hgrid h1{margin:16px 0 0;font-weight:900;font-size:58px;line-height:1;letter-spacing:-1.5px;color:var(--ink)}
.pdhub .hgrid p{margin:20px 0 0;font-size:17px;color:var(--muted);max-width:460px;line-height:1.6}
.pdhub .hcta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.pdhub .statcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pdhub .statcard{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px 20px}
.pdhub .statcard .n{font-weight:900;font-size:40px;line-height:1;color:var(--ink)}
.pdhub .statcard .u{margin-top:8px;font-family:var(--mono);font-size:11px;color:#857f6f;letter-spacing:1px}
.pdhub .wrap{max-width:1180px;margin:0 auto;padding:66px 40px 24px}
.pdhub .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.pdhub .sec-head h2{margin:12px 0 0;font-weight:900;font-size:34px;color:var(--ink)}
.pdhub .sec-meta{font-family:var(--mono);font-size:11px;color:#a39a8c}

/* Model cards */
.pdhub .show-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.pdhub .scard{display:flex;flex-direction:column;height:100%;background:var(--ds-cream-dark-gradient);border:1px solid rgba(255,248,235,.14);border-radius:18px;box-shadow:var(--ds-cream-dark-shadow)}
.pdhub .scard .imgwrap{padding:16px 16px 0}
.pdhub .scard .img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;object-position:center;padding:0;box-sizing:border-box;background:#fff;border:1px solid #e8e8e8;border-radius:12px}
.pdhub .scard .b{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1;text-align:center;align-items:center}
.pdhub .scard .tags{display:flex;gap:6px;flex-wrap:wrap;margin:0;justify-content:center}
.pdhub .scard .tags span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.5px;color:#ff9e7d;background:rgba(255,255,255,.08);border:1px solid rgba(255,248,235,.14);border-radius:999px;padding:5px 9px}
.pdhub .scard h3{margin:12px 0 0;font-weight:800;font-size:20px;letter-spacing:-.3px;color:var(--ds-cream-dark-ink)}
.pdhub .scard p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ds-cream-dark-muted);flex:1}

/* Dark bands */
.pdhub .iband,.pdhub .bband{background:radial-gradient(120% 130% at 78% 10%,#2a221b 0%,var(--dark) 62%);color:#ece9e2}
.pdhub .iband .in,.pdhub .bband .in{max-width:1180px;margin:0 auto;padding:74px 40px}
.pdhub .iband h2,.pdhub .bband h2{margin:14px 0 0;font-weight:900;font-size:32px;color:#f4ede2}
.pdhub .iband p{margin:16px 0 0;font-size:17px;line-height:1.65;color:#b7ab9c;max-width:900px}
.pdhub .band-eyebrow{color:var(--orange-l)!important}

/* Numbered overview cards */
.pdhub .section-overview{padding-top:74px;padding-bottom:30px}
.pdhub .section-overview .section-title{margin:14px 0 30px;font-weight:900;font-size:32px;color:var(--ink)}
.pdhub .ovgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pdhub .ov{display:grid;grid-template-columns:54px 1fr;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.pdhub .ov .num{width:54px;height:54px;border-radius:12px;background:var(--dark);color:#ff9e7d;font-family:var(--mono);font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center}
.pdhub .ov h3{margin:0;font-weight:800;font-size:18px;color:var(--ink)}
.pdhub .ov p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}

/* Benefits */
.pdhub .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.pdhub .bcard{background:var(--dark-2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px}
.pdhub .bcard .n{font-family:var(--mono);font-size:14px;color:#8a7d6d;margin-bottom:12px;display:block}
.pdhub .bcard h3{margin:0 0 10px;font-weight:800;font-size:18px;color:#f4ede2}
.pdhub .bcard p{margin:0;font-size:15px;line-height:1.6;color:#a99d8d}

/* Compare block */
.pdhub .section-compare{padding-top:70px;padding-bottom:20px}
.pdhub .section-title-md{margin:14px 0 22px;font-weight:900;font-size:28px;color:var(--ink)}
.pdhub .section-title-sm{margin:14px 0 24px;font-weight:900;font-size:28px;color:var(--ink)}
.pdhub .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px}
.pdhub .chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:14px;color:var(--ink)}
.pdhub .spec{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.pdhub .spec table{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.pdhub .spec th{padding:14px 16px;background:var(--dark);color:#fff;font-family:var(--mono);font-size:11px;text-align:left;letter-spacing:.5px}
.pdhub .spec td{padding:13px 16px;border-top:1px solid var(--line);color:var(--ink-2, var(--muted))}
.pdhub .spec tbody tr:nth-child(even) td{background:rgba(241,237,227,.45)}
.pdhub .spec-note{margin:22px 0 0;font-size:15px;color:#9a8f7e;line-height:1.5}

/* FAQ */
.pdhub .section-faq{margin-top:60px;background:var(--paper-2);border-top:1px solid var(--line)}
.pdhub .faq{max-width:900px;margin:0 auto;padding:78px 40px}
.pdhub .faq h2{margin:14px 0 24px;font-weight:900;font-size:30px;color:var(--ink)}

@media (max-width:920px){
  .pdhub .crumb,.pdhub .hgrid,.pdhub .wrap,.pdhub .iband .in,.pdhub .bband .in,.pdhub .faq{padding-left:20px;padding-right:20px}
  .pdhub .hgrid{grid-template-columns:1fr;gap:34px}
  .pdhub .hgrid h1{font-size:42px}
  .pdhub .ovgrid,.pdhub .bgrid{grid-template-columns:1fr}
  .pdhub .show-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (max-width:620px){
  .pdhub .show-grid{grid-template-columns:1fr}
}