/* Featured product line (Probes & Calibration): home band, products page section, line landing page.
   Mockup: docs/mockups/probes-calibration.html. Builds on modern-theme.css tokens. */

.pl-btn { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 1rem; font: 600 .86rem Inter, sans-serif; border-radius: 3px; border: 1px solid #c7cdd5; background: #fff; color: var(--ink-900); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .15s, border-color .15s; }
.pl-btn:hover { border-color: var(--ink-900); color: var(--ink-900); }
.pl-btn.is-primary { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink-900); }
.pl-btn.is-primary:hover { background: #dd9631; }
.pl-btn.is-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.pl-btn.is-ghost:hover { border-color: #fff; color: #fff; }
.pl-btn.is-lg { height: 42px; padding: 0 1.2rem; font-size: .92rem; }
.pl-link { border: 0; background: none; padding: 0; color: #1c5d99; font-weight: 600; cursor: pointer; }

.pl-kicker { font: 700 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-orange); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pl-kicker.is-light { color: #b86f0e; }
.pl-badge { font-size: .6rem; letter-spacing: .08em; background: var(--brand-orange); color: var(--ink-900); padding: .15rem .45rem; border-radius: 3px; }

/* ---- home band (dark) ---- */
.pl-band { color: #fff; padding: 3rem 0 3.1rem; background: radial-gradient(1100px 380px at 85% -10%, rgba(47, 143, 166, .25), transparent), linear-gradient(120deg, var(--ink-900), #101f30 55%, var(--brand-purple)); }
.pl-band.is-compact { padding: 1rem 0 1.4rem; }
.pl-band h2, .pl-band h1 { font: 800 1.95rem/1.2 Sora, sans-serif; color: #fff; margin: .4rem 0 .5rem; letter-spacing: -.01em; }
.pl-band h1 { font-size: 1.7rem; }
.pl-band h2 span { display: block; }
.pl-lead { color: #c6cfda; font-size: .95rem; max-width: 640px; margin: 0; }
.pl-band-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.25rem; align-items: end; }
.pl-band-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.pl-band-cta.is-right { justify-content: flex-end; margin-top: 0; }
.pl-crumbs { background: transparent; padding: 0; margin: 0 0 .5rem; font-size: .75rem; }
.pl-crumbs .breadcrumb-item a { color: rgba(255, 255, 255, .6); }
.pl-crumbs .breadcrumb-item.active { color: var(--brand-orange); }
.pl-crumbs .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .35); }

.pl-finder { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: 1rem 1.1rem; }
.pl-finder h4 { font: 700 .9rem Sora, sans-serif; color: #fff; margin: 0 0 .6rem; display: flex; gap: .5rem; align-items: center; }
.pl-finder h4 i { color: var(--brand-orange); }
.pl-finder-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .5rem; align-items: end; }
.pl-finder label { margin: 0; font-size: .7rem; color: #9fb0c3; display: flex; flex-direction: column; gap: .2rem; }
.pl-finder select, .pl-finder input { height: 36px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .25); color: #fff; padding: 0 .5rem; font-size: .84rem; width: 100%; }
.pl-finder select option { color: var(--ink-900); }
.pl-finder small { display: block; margin-top: .5rem; font-size: .72rem; color: #9fb0c3; }

.pl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; margin-top: 1.9rem; }
.pl-tile { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none !important; transition: border-color .2s, background .2s; }
.pl-tile:hover { border-color: var(--brand-orange); background: rgba(232, 162, 60, .08); color: #fff; }
.pl-tile-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(232, 162, 60, .15); color: var(--brand-orange); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.pl-tile b { font: 700 .95rem Sora, sans-serif; margin-top: .25rem; }
.pl-tile > span:not(.pl-tile-icon) { font-size: .8rem; color: #aebccc; line-height: 1.45; }
.pl-tile em { font-style: normal; font-size: .76rem; color: var(--brand-orange); margin-top: auto; padding-top: .35rem; }

/* ---- compatible-with strip ---- */
.pl-compat { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #e3e7ec; }
.pl-compat.is-dark { border-top-color: rgba(255, 255, 255, .1); }
.pl-compat-label { font: 700 .68rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-right: .3rem; }
.pl-compat.is-dark .pl-compat-label { color: #9fb0c3; }
.pl-brand { border: 1px solid #d5dae1; border-radius: 30px; padding: .25rem .75rem; font-size: .78rem; color: #374151; background: #fff; }
.pl-compat.is-dark .pl-brand { border-color: rgba(255, 255, 255, .2); color: #e6ecf2; background: transparent; }
.pl-brand b { color: var(--ink-900); }
.pl-compat.is-dark .pl-brand b { color: #fff; }
.pl-tm { flex-basis: 100%; font-size: .66rem; color: #9aa3af; }
.pl-compat.is-dark .pl-tm { color: #71839a; }

/* ---- products page section / landing ---- */
.pl-section { background: #fff; padding: 2.4rem 0 2.6rem; border-top: 1px solid #eceff3; border-bottom: 1px solid #eceff3; }
.pl-section.is-page { background: #f3f5f8; border: 0; padding: 1.6rem 0 2.4rem; }
.pl-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pl-section-head h2 { font: 800 1.65rem Sora, sans-serif; color: var(--ink-900); margin: .3rem 0 .3rem; }
.pl-section-head p { color: #6b7280; font-size: .9rem; margin: 0; max-width: 640px; }
.pl-section-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pl-subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pl-subnav a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border: 1px solid #e3e7ec; border-radius: 30px; font-size: .8rem; font-weight: 600; color: var(--ink-900); background: #f7f8fa; text-decoration: none; }
.pl-subnav a i { color: #b86f0e; }
.pl-subnav a small { color: #8a94a6; font-weight: 500; }
.pl-subnav a:hover { border-color: var(--brand-orange); background: #fff; }

.pl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.pl-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e7ec; border-radius: 8px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.pl-card:hover { border-color: rgba(232, 162, 60, .7); box-shadow: 0 10px 24px rgba(11, 20, 32, .08); }
.pl-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #f1f4f7; }
.pl-card-media img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
.pl-card-tag { position: absolute; left: .6rem; top: .6rem; z-index: 1; font: 700 .6rem Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; background: var(--ink-900); color: var(--brand-orange); padding: .2rem .45rem; border-radius: 3px; }
.pl-card-tag.is-soft { background: rgba(255, 255, 255, .9); color: #495568; border: 1px solid #e3e7ec; }
.pl-card-body { display: flex; flex-direction: column; gap: .35rem; padding: .75rem .85rem .85rem; flex: 1; }
.pl-card-body h3 { font: 700 .95rem Sora, sans-serif; margin: 0; }
.pl-card-body h3 a { color: var(--ink-900); }
.pl-card-body p { margin: 0; font-size: .78rem; line-height: 1.45; color: #6b7280; }
.pl-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.pl-chip { font-size: .7rem; background: #f1f4f7; border: 1px solid #e3e7ec; border-radius: 3px; padding: .1rem .4rem; color: #374151; text-decoration: none !important; }
.pl-chip.is-compat { background: #eaf5f8; border-color: #cfe7ee; color: #1d6577; }
a.pl-chip:hover { border-color: var(--brand-orange); color: var(--ink-900); }
.pl-chip.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pl-card-actions { display: flex; gap: .4rem; margin-top: auto; padding-top: .45rem; }
.pl-card-actions .pl-btn { height: 30px; padding: 0 .75rem; font-size: .8rem; }

.pl-strip { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .85rem 1.1rem; border-radius: 8px; background: var(--ink-900); color: #fff; }
.pl-strip > i { color: var(--brand-orange); font-size: 1.35rem; }
.pl-strip b { display: block; font: 700 .95rem Sora, sans-serif; }
.pl-strip span { color: #9fb0c3; font-size: .82rem; }
.pl-strip .pl-btn { margin-left: auto; }

/* landing: filters + results */
.pl-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pl-filters { position: sticky; top: 60px; background: #fff; border: 1px solid #e3e7ec; border-radius: 8px; padding: .9rem; font-size: .84rem; }
.pl-filters h5 { font: 700 .7rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-purple); margin: .9rem 0 .35rem; }
.pl-filters h5:first-child { margin-top: 0; }
.pl-filters > a { display: flex; align-items: center; gap: .45rem; padding: .3rem .45rem; border-radius: 4px; color: #374151; text-decoration: none; }
.pl-filters > a i { width: 1rem; color: #b86f0e; }
.pl-filters > a small { margin-left: auto; color: #8a94a6; }
.pl-filters > a:hover { background: #f4f6f8; }
.pl-filters > a.on { background: #fff4e3; color: var(--ink-900); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand-orange); }
.pl-filter-note { display: block; font-size: .72rem; color: #8a94a6; margin-top: .3rem; }
.pl-results-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; font-size: .86rem; }
.pl-results-head a { font-size: .8rem; }
.pl-empty { background: #fff; border: 1px dashed #d5dae1; border-radius: 8px; padding: 1.5rem; text-align: center; color: #6b7280; }

@media (max-width: 1199px) {
  .pl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-cards.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .pl-band-top { grid-template-columns: 1fr; gap: 1.25rem; }
  .pl-band-cta.is-right { justify-content: flex-start; }
  .pl-tiles { grid-template-columns: repeat(2, 1fr); }
  .pl-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pl-cards, .pl-cards.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-layout { grid-template-columns: 1fr; }
  .pl-filters { position: static; }
}
@media (max-width: 575px) {
  .pl-band { padding: 2rem 0; }
  .pl-band h2 { font-size: 1.45rem; }
  .pl-finder-row { grid-template-columns: 1fr 1fr; }
  .pl-finder-row label:first-child { grid-column: 1 / -1; }
  .pl-tiles, .pl-cards, .pl-cards.is-3 { grid-template-columns: 1fr; }
  .pl-strip { flex-wrap: wrap; }
  .pl-strip .pl-btn { margin-left: 0; }
}

/* compatibility line (no brand names on the website) */
.pl-compat { gap: .55rem; font-size: .88rem; color: #374151; }
.pl-compat > i { color: #b86f0e; }
.pl-compat b { color: var(--ink-900); }
.pl-compat.is-dark { color: #c6cfda; }
.pl-compat.is-dark > i { color: var(--brand-orange); }
.pl-compat.is-dark b { color: #fff; }