/* ==========================================================================
   timingpulley.biz — product.css
   Products hub (products.php) + the 11 product pages (generated by tools/products).
   Builds on industry.css (crumbs, ind-hero, ind-sec, icard, ind-steps, ind-faq) and
   components.css (btn-tp, mono-label, xmarks, faq2, product-card). Tokens only.
   ========================================================================== */

/* sections land below the sticky header + section bar */
.psec { scroll-margin-top: 128px; }
@media (max-width: 1199.98px) { .psec { scroll-margin-top: 116px; } }
.psec__label { margin-bottom: 10px; color: var(--c-primary); }
.ind-sec--dark .psec__label { color: var(--c-accent); }

/* ---------- Product hero ---------- */
.pd-hero__flag { margin-left: 4px; padding: 2px 8px; background: var(--c-accent); color: var(--c-ink); font-size: 11px; letter-spacing: .08em; }
.pd-photo { --xm: var(--c-primary); position: relative; margin: 0; aspect-ratio: 1 / 1; background: var(--c-surface); border: 1px solid var(--c-line); }
.pd-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Section bar (sticky below the header) ---------- */
.secnav { position: sticky; top: 60px; z-index: 1020; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--c-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* top = the scrolled header height (60px at every width since 2026-10-29), so the bar sits flush under it */
.secnav__inner { display: flex; align-items: center; gap: 14px; }
.secnav__list { list-style: none; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: -8px; }
.secnav__list::-webkit-scrollbar { display: none; }
.secnav__list a { min-height: 48px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--c-text); box-shadow: inset 0 -2px 0 transparent; transition: color var(--t-fast), box-shadow var(--t-fast); }
.secnav__list a:hover { color: var(--c-primary); }
.secnav__list a[aria-current] { color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-primary); }

/* ---------- Overview + at a glance ---------- */
/* photo | copy (lead, paras, CTAs, trust), then the at-a-glance band across both (hero content moved here 2026-10-22) */
.pov { display: grid; grid-template-columns: 1fr; gap: 32px 64px; align-items: center; }
@media (min-width: 1200px) { .pov { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.pov__photo { width: 100%; max-width: 560px; }
@media (max-width: 1199.98px) { .pov__photo { max-width: 560px; aspect-ratio: 4 / 3; } }   /* stacked: keep the photo a sensible size (2026-10-29) */
.pov__glance { grid-column: 1 / -1; }
@media (min-width: 768px) { .pov__glance dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1200px) { .pov__glance dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pov__copy h2, .pov__copy .sec-title { text-wrap: balance; }
.pov__copy p:not(.mono-label):not(.eyebrow) { max-width: 62ch; margin-top: 16px; }
.pov__copy .ind-intro__lead { margin-top: 18px; }
.pov__copy p a, .pspec__note a, .icard p a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.glance { padding: clamp(22px, 2vw, 28px); background-color: var(--c-primary-deep); color: var(--c-on-dark); }
.glance > .mono-label { color: var(--c-accent); }
.glance dl { margin-top: 14px; }
.glance dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--c-line-dark); }
.glance dt { padding-top: 2px; font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); }
.glance dd { margin: 0; font-size: 14px; line-height: 1.55; color: #fff; }
@media (max-width: 575.98px) { .glance dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Spec explorer: tabs + panes (side panel + table) ---------- */
.ptabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ptab { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--c-line); background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--c-ink); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.ptab:hover { border-color: var(--c-primary-line); }
.ptab.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pspec__pane { display: grid; grid-template-columns: 1fr; border: 1px solid var(--c-line); background: #fff; }
.pspec__pane[hidden] { display: none; }
.pspec__pane.is-active { animation: tp-open .3s var(--ease) both; }
@media (min-width: 992px) { .pspec__pane { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.pspec__side { padding: clamp(22px, 2vw, 28px); background-color: var(--c-primary-deep); color: var(--c-on-dark); }
.pspec__side .mono-label { color: var(--c-accent); }
.pspec__name { margin-top: 8px; font-size: clamp(20px, 17px + .6vw, 26px); line-height: 1.15; color: #fff; }
.pspec__side p:not(.mono-label) { margin-top: 10px; font-size: 15px; }
.pspec__form { display: block; width: 100%; max-width: 320px; height: 56px; margin-top: 22px; }
.pspec__teeth { fill: none; stroke: var(--c-accent); stroke-width: 1.6; stroke-linejoin: round; }
.pspec__base { stroke: rgba(255, 255, 255, .25); stroke-width: 1; stroke-dasharray: 3 4; }
.pspec__side .pspec__formnote { margin-top: 6px; font-family: var(--ff-mono); font-size: 11px; color: var(--c-steel); }
.pspec__table, .table-scroll { min-width: 0; overflow-x: auto; }
.pspec__table { padding: 12px clamp(12px, 2vw, 24px) 16px; }
.table-scroll { border: 1px solid var(--c-line); background: #fff; }
.pspec__note { margin-top: 14px; font-size: 14px; color: var(--c-muted); }

/* spec tables */
.spec-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.spec-table thead th { padding: 12px 10px; border-bottom: 1px solid var(--c-primary-line); background: var(--c-primary-50); text-align: left; font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.spec-table tbody th, .spec-table td { padding: 12px 10px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.spec-table tbody th { font-family: var(--ff-head); font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.spec-table tbody tr:last-child > * { border-bottom: 0; }
.spec-table--guide { min-width: 720px; }
.spec-table--2 { min-width: 0; } /* two columns (bush + bore list) fit any width; long lists wrap */
.spec-table--guide thead th { padding: 14px 16px; border-bottom: 0; }
.spec-table--guide tbody th, .spec-table--guide td { padding: 14px 16px; }
.spec-table--guide tbody tr:nth-child(even) { background: var(--c-surface); }
.spec-table--guide tbody th a { color: var(--c-primary); }
.spec-table--guide tbody th a:hover { text-decoration: underline; }
.spec-table__mono { font-family: var(--ff-mono); font-size: 13px; }

/* ---------- Card sections ---------- */
@media (min-width: 992px) { .icard-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.icard .icard__best { margin-top: auto; padding-top: 6px; }

/* ---------- Steps + aside ---------- */
.psteps { display: grid; grid-template-columns: 1fr; gap: 28px 40px; align-items: start; }
@media (min-width: 1200px) { .psteps { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.psteps__main h2, .psteps__main .sec-title { font-size: var(--fs-h2); }
.psteps__list { margin-top: 26px; }
@media (min-width: 1200px) { .psteps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.paside { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px; background: var(--c-surface); border: 1px solid var(--c-line); }
.paside .mono-label { color: var(--c-muted); }
.paside__title { font-family: var(--ff-head); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--c-ink); }
.paside p:not(.mono-label):not(.paside__title) { font-size: 14px; }
.paside .btn-tp { margin-top: 8px; }

/* ---------- Industries using the product ---------- */


/* ==========================================================================
   Products hub
   ========================================================================== */



.pcap { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 992px) { .pcap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pcap__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pcap__chips li { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .2); font-size: 13px; font-weight: 600; color: #fff; }
.pcap__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 20px; }
.pcap__list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--c-line-dark); font-size: 14px; color: #fff; }
.pcap__list li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; background: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .pspec__pane.is-active { animation: none; }
}

/* 5 card sections: 5 across on wide screens */
@media (min-width: 1200px) { .icard-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 992px) and (max-width: 1199.98px) { .icard-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* links inside dark cards: amber, readable on the deep purple */
.icard--dark p a { color: var(--c-accent); }
.icard--dark p a:hover { color: #fff; }
/* aside on a grey section stays white */
.ind-sec--surface .paside { background: #fff; }

/* ==========================================================================
   Hover + motion (product pages and hub). Lifts use `translate` so they compose
   with GSAP's transform. Nothing moves under prefers-reduced-motion.
   ========================================================================== */
.pd-photo img { transition: transform .6s var(--ease); }
.spec-table tbody tr { transition: background-color var(--t-fast); }
.paside, .pcap__chips li { transition: border-color var(--t-fast), box-shadow var(--t-fast), translate var(--t-fast) var(--ease); }
@media (hover: hover) {
  .pd-photo:hover img { transform: scale(1.04); }
  .spec-table tbody tr:hover { background: var(--c-primary-50); }
  .spec-table--guide tbody tr:hover { background: var(--c-primary-50); }
  .paside:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-hover); }
  .pcap__chips li:hover { border-color: var(--c-accent); }
  .glance dl > div { transition: padding-left var(--t-fast) var(--ease); }
  .glance dl > div:hover { padding-left: 6px; }
}

/* spec explorer: rows cascade in and the tooth form draws itself when a tab opens */
@keyframes prow-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes teeth-draw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .pspec__pane.is-active tbody tr { animation: prow-in .45s var(--ease) both; }
  .pspec__pane.is-active tbody tr:nth-child(2) { animation-delay: .04s; }
  .pspec__pane.is-active tbody tr:nth-child(3) { animation-delay: .08s; }
  .pspec__pane.is-active tbody tr:nth-child(4) { animation-delay: .12s; }
  .pspec__pane.is-active tbody tr:nth-child(5) { animation-delay: .16s; }
  .pspec__pane.is-active tbody tr:nth-child(6) { animation-delay: .2s; }
  .pspec__pane.is-active tbody tr:nth-child(7) { animation-delay: .24s; }
  .pspec__pane.is-active tbody tr:nth-child(n+8) { animation-delay: .28s; }
  .pspec__pane.is-active .pspec__teeth { stroke-dasharray: 900; animation: teeth-draw 1.4s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-photo img { transform: none !important; }
}


/* product hero: key specs in the callout over the photo (same place as the industry "Products used" callout) */
/* ---------- Timing pulley types (tools/shared/pulley-types.mjs; timing pulley pages) ---------- */
.ptype-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 992px) { .ptype-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ptype { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--c-line); background: var(--c-white); }
.ptype__fig { padding: 14px 18px; border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.ptype__svg { display: block; width: 100%; max-width: 220px; height: auto; margin-inline: auto; }
.ptype__body path, .ptype__body rect { fill: var(--c-primary-50); stroke: var(--c-primary); stroke-width: 1.5; stroke-linejoin: round; }
.ptype__body .ptype__teeth { fill: none; stroke: var(--c-ink); stroke-width: 3; stroke-dasharray: 2.5 2.5; }
.ptype__axis { fill: none; stroke: var(--c-accent-deep); stroke-width: 1; stroke-dasharray: 8 3 2 3; }
.ptype__dim { fill: none; stroke: var(--c-muted); stroke-width: 1; }
.ptype__body-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ptype__code { font-family: var(--ff-mono); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--c-primary); }
.ptype .htitle { font-size: 18px; line-height: 1.3; }
.ptype__body-text > p:nth-child(3) { font-size: 14px; line-height: 1.55; }
.ptype__adds { margin-top: auto; padding-top: 8px; font-family: var(--ff-mono); font-size: 11px; line-height: 1.5; color: var(--c-muted); }
.ptype-rules { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
@media (min-width: 768px) { .ptype-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ptype-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ptype-rules li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--c-line); background: var(--c-white); font-size: 14px; line-height: 1.55; }
.ptype-rules b { display: block; margin-bottom: 2px; font-family: var(--ff-head); font-weight: 600; font-size: 15px; color: var(--c-ink); }
.ptype-rules .icard__icon { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .ptype-grid { gap: 10px; }
  .ptype__fig { padding: 10px; }
  .ptype__body-text { padding: 12px; }
  .ptype .htitle { font-size: 15px; }
  .ptype__body-text > p:nth-child(3) { font-size: 13px; }
}

/* ---------- Shape tiers (2026-10-28, user): see tokens.css ---------- */
.pd-hero__flag, .ptab, .pcap__chips li { border-radius: var(--r-sm); }
.pd-photo { overflow: hidden; border-radius: var(--r-md); }
.glance, .table-scroll, .paside, .ptype-rules li { border-radius: var(--r-md); }
.pspec__pane, .ptype { overflow: hidden; border-radius: var(--r-md); }

/* ---------- Type (2026-10-29, rework): labels in Inter; monospace only for data values ---------- */
.glance dt, .pspec__side .pspec__formnote, .spec-table thead th, .ptype__adds { font-family: var(--ff-body); font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: none; }

/* ---------- Brochures (2026-10-29): download link on product pages + catalogue cards on the products hub ---------- */
.pov__brochure { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 12px; font-size: 13px; color: var(--c-muted); }
.pov__brochure a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.pov__brochure a:hover { color: var(--c-primary-deep); }
.cat-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 576px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.cat-card { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-white); transition: border-color var(--t-fast); }
.cat-card:hover { border-color: var(--c-primary-line); }
.cat-card:focus-within { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.cat-card a:focus-visible { outline: none; }
.cat-card__icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-primary-50); color: var(--c-primary); }
.cat-card__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-card__title { font-family: var(--ff-head); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--c-ink); }
.cat-card__title a { color: var(--c-ink); }
.cat-card__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card opens the PDF */
.cat-card:hover .cat-card__title a { color: var(--c-primary); }
.cat-card__text { margin: 0; font-size: 14px; line-height: 1.5; }
.cat-card__meta { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--c-primary); }