/* ============================================================
   Trans-Digi Global — Himel product detail pages
   Page-specific styles, loaded AFTER style.css so it wins the
   cascade. Reuses the homepage/About/Himel-distributor design
   system + tokens (--lime, --accent, --ink, --maxw, fonts …).
   ============================================================ */

/* ---------- page-hero: product breadcrumb + tags ---------- */
.pd-hero .page-hero__inner{max-width:var(--maxw);margin:0 auto}
.pd-hero .crumb{justify-content:center}
.pd-hero__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px}
.pd-tag{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 14px;
  font-family:var(--font-head);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.pd-tag--brand{background:rgba(107,192,84,.14);border:1px solid rgba(107,192,84,.4);color:var(--lime)}
.pd-tag--type{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#dbe6df}
.pd-tag svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- main product layout ---------- */
.pd-main{padding:52px 0 8px;background:var(--bg)}
.pd-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:start}

/* visual: coded, brand-tinted product cover (no hotlinked images) */
.pd-visual{position:sticky;top:96px}
.pd-visual__frame{position:relative;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 120% at 78% 8%,#0e4a2d 0%,#083020 52%,#04180e 100%);
  padding:34px 30px 30px;box-shadow:0 22px 50px rgba(4,24,14,.16)}
.pd-visual__frame::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 26px);opacity:.6}
.pd-visual__brandbar{position:relative;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px}
.pd-visual__logo{background:#fff;border-radius:9px;padding:8px 14px;display:grid;place-items:center}
.pd-visual__logo img{max-height:26px;width:auto}
.pd-visual__model{font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime)}
.pd-visual__stage{position:relative;background:#fff;border-radius:14px;padding:22px;display:grid;
  place-items:center;min-height:280px}
.pd-visual__stage img{max-height:260px;width:auto;object-fit:contain}
.pd-visual__note{position:relative;margin-top:16px;text-align:center;color:#9fb3a8;font-size:.74rem;
  font-family:var(--font-head);letter-spacing:.02em}

/* body: title, lede, specs, applications */
.pd-body__type{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);
  font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pd-body__type::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.pd-body h1{font-family:var(--font-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.7rem,3.2vw,2.35rem);line-height:1.12;letter-spacing:-.01em;margin:12px 0 4px}
.pd-body__model{font-family:var(--font-head);font-weight:600;color:var(--accent);font-size:.9rem;
  letter-spacing:.02em}
.pd-body__lede{margin-top:16px;font-size:1.02rem;color:#48544e;line-height:1.75}
.pd-body__lede strong{color:var(--ink);font-weight:600}
.pd-body p+p{margin-top:12px}

/* quick availability strip */
.pd-avail{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pd-avail li{display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-size:.82rem;
  font-family:var(--font-head);font-weight:500;color:var(--ink)}
.pd-avail svg{width:16px;height:16px;stroke:var(--accent);stroke-width:1.9;fill:none;flex:none}

/* specs table */
.pd-block{margin-top:34px}
.pd-block__head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.pd-block__head svg{width:22px;height:22px;stroke:var(--accent);stroke-width:1.7;fill:none;flex:none}
.pd-block__head h2{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.15rem}
.pd-specs{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.pd-specs dl{display:grid;grid-template-columns:auto 1fr}
.pd-specs dt,.pd-specs dd{padding:12px 18px;border-top:1px solid var(--line);font-size:.9rem}
.pd-specs dl>*:first-child,.pd-specs dl>*:nth-child(2){border-top:0}
.pd-specs dt{font-family:var(--font-head);font-weight:600;color:var(--ink);
  background:var(--bg-soft);white-space:nowrap}
.pd-specs dd{color:var(--body)}
.pd-specs dd strong{color:var(--ink);font-weight:600}
.pd-note{margin-top:12px;font-size:.8rem;color:var(--body);display:flex;gap:8px;align-items:flex-start}
.pd-note svg{width:16px;height:16px;stroke:var(--gold);stroke-width:1.9;fill:none;flex:none;margin-top:2px}

/* feature / application lists */
.pd-list{display:grid;gap:11px}
.pd-list li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:#4a564f}
.pd-list svg{width:19px;height:19px;stroke:var(--accent);stroke-width:2;fill:none;flex:none;margin-top:2px}
.pd-list li strong{color:var(--ink);font-weight:600}

.pd-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.pd-app{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;
  box-shadow:var(--shadow);transition:.22s}
.pd-app:hover{transform:translateY(-3px);border-color:#cfe0d4;box-shadow:0 16px 34px rgba(4,24,14,.09)}
.pd-app__ic{width:42px;height:42px;border-radius:11px;background:var(--green-850);display:grid;
  place-items:center;margin-bottom:12px}
.pd-app__ic svg{width:22px;height:22px;stroke:#fff;stroke-width:1.6;fill:none}
.pd-app h3{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:.98rem;margin-bottom:5px}
.pd-app p{font-size:.84rem;color:var(--body);line-height:1.6}

/* ---------- CTA block ---------- */
.pd-cta{margin-top:52px;padding:56px 0}
.pd-cta__card{position:relative;overflow:hidden;border-radius:20px;padding:44px clamp(26px,4vw,54px);
  background:radial-gradient(120% 140% at 12% 10%,#0a3b25 0%,#062a1a 55%,#04180e 100%);
  display:grid;grid-template-columns:1.3fr .9fr;gap:34px;align-items:center}
.pd-cta__card::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 26px);opacity:.5}
.pd-cta__copy{position:relative}
.pd-cta__copy h2{font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15}
.pd-cta__copy p{color:#c7d4cd;margin-top:12px;font-size:.96rem;line-height:1.7;max-width:520px}
.pd-cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pd-cta__aside{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:22px 24px}
.pd-cta__aside strong{display:block;font-family:var(--font-head);color:#fff;font-size:.96rem;margin-bottom:12px}
.pd-cta__aside a{display:flex;align-items:center;gap:11px;color:#dbe6df;font-size:.9rem;padding:9px 0}
.pd-cta__aside a+a{border-top:1px solid rgba(255,255,255,.1)}
.pd-cta__aside a:hover{color:var(--lime)}
.pd-cta__aside svg{width:18px;height:18px;stroke:var(--lime);stroke-width:1.8;fill:none;flex:none}

/* ---------- related / back-to-shop strip ---------- */
.pd-related{padding:8px 0 62px;background:var(--bg)}
.pd-related__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.pd-related__head h2{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.3rem}
.pd-related__head a{font-family:var(--font-head);font-weight:600;font-size:.84rem;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pd-related__head a:hover{color:var(--cta-hover)}
.pd-related__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pd-rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:20px;box-shadow:var(--shadow);transition:.22s}
.pd-rel-card:hover{transform:translateY(-3px);border-color:#cfe0d4;box-shadow:0 16px 34px rgba(4,24,14,.09)}
.pd-rel-card__tag{font-family:var(--font-head);font-weight:600;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.pd-rel-card h3{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:1rem;
  line-height:1.25;margin:8px 0 6px}
.pd-rel-card p{font-size:.83rem;color:var(--body);line-height:1.55;flex:1}
.pd-rel-card span.arrow-link{margin-top:12px}
.pd-backrow{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between}
.pd-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;
  font-size:.86rem;color:var(--ink)}
.pd-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.pd-back:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .pd-grid{grid-template-columns:1fr;gap:30px}
  .pd-visual{position:static}
  .pd-cta__card{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  .pd-visual__stage{min-height:220px}
  .pd-visual__stage img{max-height:200px}
  .pd-specs dl{grid-template-columns:1fr}
  .pd-specs dt{border-top:1px solid var(--line)}
  .pd-specs dd{padding-top:4px}
  .pd-specs dl>*:nth-child(2){border-top:0}
}