/* V23.49: Dynamic Modules CSS owner (Core 0.8A contract).
   Scope: Related Products compact recommendation cards (tpk-product-recommendations__*),
   plus reserved namespaces for Product Resources (tpk-product-resource-*),
   Certification trust cards (tpk-product-certification-*) and Accessories diffs.
   Related Projects keeps its existing tpk-product-related__* rules in product.css.
   V23.69: Downloads restored to the pre-V23.68 owner-approved layout (three
   side-by-side category columns, image/photo back inside reports, borderless
   transparent file rows); project detail pages keep the dynamic Related
   Projects mount on the product compound class, so the whole
   card/track system applies there too; the hand-written tpk-case__related
   block hides via :has() when the dynamic module renders. */

/* V23.49: Related Products — section shell */
.tpk-product .tpk-product-recommendations {margin-top:var(--tpk-product-section-space);}
.tpk-product .tpk-product-recommendations__title {font-size:28px;font-weight:700;letter-spacing:-.3px;margin-bottom:26px;}
.tpk-product .tpk-product-recommendations__track {display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
.tpk-product .tpk-product-recommendations__track::-webkit-scrollbar {display:none;}

/* V23.49: Related Products — card widths = visible-cards contract
   (Mobile 1 / >=560 2 / >=768 2 / >=980 3 / >=1180 4 of max 5 pool cards) */
/* V23.54: card has NO hover motion of its own (theme default: only compliance
   cards lift; listing/related/accessory cards do not). Replaces V23.49 lift. */
.tpk-product .tpk-product-recommendations__card {flex:0 0 86%;min-width:0;scroll-snap-align:start;background:#fff;border:1px solid #e8e8ed;border-radius:12px;overflow:hidden;}
@media (min-width:560px) {.tpk-product .tpk-product-recommendations__card {flex-basis:calc((100% - 24px) / 2);}}
@media (min-width:980px) {.tpk-product .tpk-product-recommendations__card {flex-basis:calc((100% - 48px) / 3);}}
@media (min-width:1180px) {.tpk-product .tpk-product-recommendations__card {flex-basis:calc((100% - 72px) / 4);}}

/* V23.49: Related Products — media */
.tpk-product .tpk-product-recommendations__media {display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff;}
.tpk-product .tpk-product-recommendations__image {width:100%;height:100%;object-fit:cover;transition:transform var(--tpk-product-motion-emphasis) var(--tpk-product-ease);}
/* V23.54: image grows only when hovering the image itself, same trigger and
   scale(1.04) as the related-projects media in product.css (theme default). */
.tpk-product .tpk-product-recommendations__media:hover .tpk-product-recommendations__image {transform:scale(1.04);}

/* V23.49: Related Products — body: category, model, facts (max 3) */
.tpk-product .tpk-product-recommendations__body {padding:16px 18px 18px;}
.tpk-product .tpk-product-recommendations__category {display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tpk-product-light);margin-bottom:6px;}
.tpk-product .tpk-product-recommendations__model {font-size:17px;font-weight:700;letter-spacing:-.2px;margin:0 0 10px;}
/* V23.54: model link underline = theme default pattern (product.css
   tpk-product-related__link): gradient grows on hover, NO color change. */
.tpk-product .tpk-product-recommendations__model a {display:inline;color:var(--tpk-product-text);text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--tpk-product-motion-icon) var(--tpk-product-ease);}
.tpk-product .tpk-product-recommendations__model a:hover,.tpk-product .tpk-product-recommendations__model a:focus-visible {background-size:100% 1px;}
.tpk-product .tpk-product-recommendations__facts {display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;}
.tpk-product .tpk-product-recommendations__facts > div {min-width:0;}
.tpk-product .tpk-product-recommendations__facts dt {font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tpk-product-light);margin-bottom:2px;}
.tpk-product .tpk-product-recommendations__facts dd {margin:0;font-size:13px;font-weight:600;color:var(--tpk-product-text);}

/* V23.49: Related Products — focus + reduced motion */
.tpk-product .tpk-product-recommendations__model a:focus-visible,.tpk-product .tpk-product-recommendations__media:focus-visible {outline:2px solid var(--tpk-product-accent);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce) {
  .tpk-product .tpk-product-recommendations__image {transition:none;}
  .tpk-product .tpk-product-recommendations__media:hover .tpk-product-recommendations__image {transform:none;}
}

/* V23.49: Resources module — reserved namespace implemented in V23.55 (below) */
/* V23.49: Certification trust card — reserved namespace implemented in V23.55 (below) */
/* V23.49: Accessories — base styles stay in product.css owner; diffs mount here when Core 0.8A ships */

/* V23.55: M2 — Certifications & Verification + Resources & Downloads (Core 0.8A contract #6/#7/#9).
   Certifications reuses tpk-product-compliance__* (product.css); only badge/actions diffs mount here.
   Resources is a new namespace; card shape echoes the compliance card (theme default values only). */

/* Section titles share the Related Products heading scale. Direct-child scope
   keeps card-level __title rules separate. V23.58: 34px = product-page H2 scale,
   simplified section names render from PHP (Certifications / Downloads).
   V23.63: Accessories / Related Projects use bare <h2> section titles (they
   must not share the card-level tpk-product-related__title class). */
.tpk-product .tpk-product-certifications > .tpk-product-certifications__title,
.tpk-product .tpk-product-resources > .tpk-product-resources__title,
.tpk-product .tpk-product-accessories > h2,
.tpk-product .tpk-product-related > h2 {font-size:34px;font-weight:700;letter-spacing:-.3px;margin:0 0 24px;}

/* Certifications — V23.57: cards without verify_url render as one whole-row
   <a download> (theme hover-lift applies); cards with verify_url stay <div>
   with both in-card links. The 44px SVG badge was replaced by the compliance
   code word (ETL/UL/CE/fallback) per the r12 QA final shape. */
.tpk-product .tpk-product-certifications__card .tpk-product-compliance__name {margin:0 0 8px;}
.tpk-product .tpk-product-certifications__card .tpk-product-compliance__description {margin:0 0 4px;}
.tpk-product .tpk-product-compliance__actions {display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;}
.tpk-product .tpk-product-compliance__actions .tpk-product-compliance__action {margin-top:0;}
.tpk-product a.tpk-product-compliance__action:hover,
.tpk-product a.tpk-product-compliance__action:focus-visible {color:var(--tpk-product-accent);}

/* V23.57: r12 QA final — scoped under .tpk-dynamic-modules-root so the legacy
   compliance cards and hand-written downloads in the body HTML are untouched.
   Certifications: auto-fit columns (3 cards = 3-up, 4 = 4-up, 5 = 5-up), dark
   feature card with green glow, 36px code, de-emphasized text, Download
   pinned to the card bottom. */
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__list {grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
@media (max-width:980px) {.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__list {grid-template-columns:repeat(2,minmax(0,1fr));}}
/* V23.72: single certification card must not stretch to the full auto-fit
   row (looked like a long banner); clamp it to the card's own 4:3 ratio. */
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card:only-child {max-width:430px;aspect-ratio:4/3;align-self:start;}
/* V23.58: shadow regression — both values come from the theme's existing
   shadow set (zero new recipes). V23.64: light card moves down to the smaller
   --shadow-soft token (0 14px 34px rgba(16,24,40,.035)) per shadow-set review;
   the dark card keeps the black panel recipe (0 12px 26px rgba(0,0,0,.18)).
   V23.64: the compliance action icons and the frow download button icon set
   background-image:none — the global icon-map inline rule paints the
   black-stroke SVG over the currentColor mask fill, which rendered the
   dark-card arrow near-invisible and faked the button hover flip. */
/* V23.72: certification card textures served from OSS (bucket path
   images/website/listing-card/Page Decoration/, space keys verified OK).
   Light cards default to the base-light brushed-steel sheet (dark text per
   owner decision), the dark feature card layers its green glow over the
   base-dark glass texture; per-code classes (--code-*) override the light
   default with the dedicated engraved sheet, dark card never takes them. */
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-base-light.webp') center/cover no-repeat #fff;border-radius:10px;box-shadow:var(--tpk-shadow-soft);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-base-dark.webp') center/cover no-repeat, #0f1716;box-shadow:0 12px 26px rgba(0,0,0,.18);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--code-ce {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-ce.webp') center/cover no-repeat #fff;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--code-etl {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-etl.webp') center/cover no-repeat #fff;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--code-ul {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-ul.webp') center/cover no-repeat #fff;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--code-dlc {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-dlc.webp') center/cover no-repeat #fff;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark .tpk-product-compliance__code {color:#fff;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark .tpk-product-compliance__name {color:#fff;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark .tpk-product-compliance__description {/* V23.82: .66->.65 */color:rgba(255,255,255,.65);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark .tpk-product-compliance__action {/* V23.82: .72->.65 */color:rgba(255,255,255,.65);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__code {font-size:36px;font-weight:800;margin-bottom:20px;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__name {font-size:12px;font-weight:400;/* V23.82: #111->rgba(0,0,0,.88) */color:rgba(0,0,0,.88);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__description {font-size:11px;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__action {margin-top:auto;padding-top:16px;font-size:11px;font-weight:600;/* V23.82: #5c6470->rgba(0,0,0,.60) */color:rgba(0,0,0,.60);align-self:flex-start;display:inline-flex;align-items:center;gap:6px;}

/* V23.58: card hover = menu light-green fill (QA V3 final). No lift, no
   shadow change — the fill IS the hover. Underline animation on the in-card
   links (Download / Verify); whole-card <a> hovers light their span too. */
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card {transition:background-color .25s var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__card:hover,
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__card:focus-visible,
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card:hover,
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card:focus-visible {transform:none;box-shadow:var(--tpk-shadow-soft);background-color:rgba(0,155,116,.05);}
/* dark-card hover needs the a/div element in the selector to out-rank the
   generic a-card hover above (same (0,4,1) specificity, later in source). */
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__card--dark:hover,
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__card--dark:focus-visible,
.tpk-product.tpk-dynamic-modules-root div.tpk-product-compliance__card--dark:hover,
.tpk-product.tpk-dynamic-modules-root div.tpk-product-compliance__card--dark:focus-visible,
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark:hover,
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark:focus-visible {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-base-dark.webp') center/cover no-repeat, #0f1716;box-shadow:0 12px 26px rgba(0,0,0,.18);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__action-text {display:inline;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--tpk-product-motion-icon) var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__action:hover .tpk-product-compliance__action-text,
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__action:focus-visible .tpk-product-compliance__action-text,
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__card:hover .tpk-product-compliance__action-text,
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__card:focus-visible .tpk-product-compliance__action-text {background-size:100% 1px;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark a.tpk-product-compliance__action:hover,
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark a.tpk-product-compliance__action:focus-visible,
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark:hover .tpk-product-compliance__action,
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark:focus-visible .tpk-product-compliance__action {color:#3ecf9e;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__action [data-tpk-icon] {display:block;width:13px;height:13px;flex:0 0 13px;background-color:currentColor;background-image:none;transition:transform var(--tpk-product-motion-icon) var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__action:hover [data-tpk-icon="action-arrow-up-right"],
.tpk-product.tpk-dynamic-modules-root a.tpk-product-compliance__action:focus-visible [data-tpk-icon="action-arrow-up-right"] {transform:translate(1.5px,-1.5px);}

/* V23.57: Resources — three balanced groups (Specifications & Brochure /
   Drawings & Photometrics / Test Reports & Images) of one-file-per-row
   links. No card frames: hairline row dividers, 30px file icon aligned with
   the 30px circular download button (theme action-download mask icon, green
   center-fill on row hover, title underline grows within the text width). */
/* V23.68: Downloads regrouped per QA sign-off - each category is now a full-width
   block (title + 3-column file grid) instead of three side-by-side columns whose
   heights mirror their file counts (the "1-row specs vs 4-row reports" imbalance).
   Rows became bordered cells so a 3/2/1-column grid stays legible; the grid
   guarantees no holes regardless of how many files land in a group. */
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__groups {display:grid;grid-template-columns:1fr;gap:26px 34px;}
@media (min-width:768px) {.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__groups {grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__group {min-width:0;align-self:start;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__gtitle {margin:0 0 4px;padding-left:8px;font-size:16px;line-height:1.3;font-weight:700;color:#111;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__flist {display:grid;gap:0;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow {display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border:0;border-bottom:1px solid rgba(17,17,17,.10);border-radius:0;background:transparent;color:inherit;text-decoration:none;transition:background-color var(--tpk-product-motion-media) var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow:last-child {border-bottom:0;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow:hover,
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow:focus-visible {background:rgba(0,155,116,.06);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-icon [data-tpk-icon] {display:block;width:30px;height:30px;background-position:center;background-repeat:no-repeat;background-size:contain;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-main {min-width:0;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-title {display:inline-block;max-width:100%;color:#111;font-size:11px;font-weight:400;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--tpk-product-motion-icon) var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-title:hover {background-size:100% 1px;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow:focus-visible .tpk-product-resources__frow-title {background-size:100% 1px;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-meta {display:block;color:#8a939b;font-size:9px;line-height:1.4;margin-top:1px;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl {position:relative;display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:#f1f4f2;color:#111;line-height:1;overflow:hidden;transition:transform var(--tpk-product-motion-emphasis) var(--tpk-product-ease),color var(--tpk-product-motion-icon) var(--tpk-product-ease) .05s;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl::before {content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tpk-product-accent);opacity:0;transform:scale(.85);transition:opacity var(--tpk-product-motion-icon) var(--tpk-product-ease),transform var(--tpk-product-motion-icon) var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl:hover,
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl:focus-visible,
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow:focus-visible .tpk-product-resources__frow-dl {color:#fff;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl:hover::before,
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl:focus-visible::before,
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow:focus-visible .tpk-product-resources__frow-dl::before {opacity:1;transform:scale(1);transition:opacity var(--tpk-product-motion-media) var(--tpk-product-ease),transform var(--tpk-product-motion-media) var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl [data-tpk-icon] {position:relative;z-index:1;display:block;width:16px;height:16px;flex:0 0 16px;background-color:currentColor;background-image:none;}

/* V23.57: mobile (<=560) — certification list becomes a shadow-lifted snap
   track (78% cards, green glow on every card, 30px code) and section H2s
   drop to 22px per the r9-r12 QA mobile decisions.
   V23.67: the track reserves 44px bottom padding — enough runway for the
   0 10px 30px card shadow, which the scroll clip was guillotining exactly
   at its densest band (the old 6px read as a hard gray cut under the cards). */
@media (max-width:560px) {
  .tpk-product.tpk-dynamic-modules-root .tpk-product-certifications > .tpk-product-certifications__title,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-resources > .tpk-product-resources__title,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-accessories > h2,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-related > h2 {font-size:22px;margin-bottom:18px;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__list {display:flex;gap:24px;overflow-x:auto;grid-template-columns:none;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:44px;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__list::-webkit-scrollbar {display:none;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card:only-child {align-self:flex-start;aspect-ratio:1/1;max-width:none;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card {flex:0 0 78%;min-width:0;scroll-snap-align:center;border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.12);background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-base-light.webp') center/cover no-repeat #fff;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__card--dark {background:url('https://static.tpk-led.com/images/website/listing-card/Page%20Decoration/cert-bg-base-dark.webp') center/cover no-repeat, #0f1716;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-compliance__code {font-size:30px;margin-bottom:14px;}
}

.tpk-product .tpk-product-resources__all {display:inline-flex;margin-top:24px;font-size:15px;font-weight:700;color:var(--tpk-product-text);text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--tpk-product-motion-icon) var(--tpk-product-ease);}
.tpk-product .tpk-product-resources__all:hover,
.tpk-product .tpk-product-resources__all:focus-visible {background-size:100% 1px;}

/* M2 single source of truth: when the dynamic Resources module renders, the
   legacy hand-written Downloads section inside the body HTML is hidden
   (contract #6 — Theme stops reading hand-written Downloads).
   V23.91 FIX: probe rebuilt at common-ancestor level. V23.89 wrapped
   .tpk-page-content inside .tpk-page-surface, so .tpk-page-content is no
   longer a preceding sibling of the dynamic root and the old (~) chain
   never matched — legacy blocks stayed visible next to the dynamic ones
   (duplicate Related Projects / Accessories / Downloads). Probes now hang
   on :where(article, main, body), an ancestor that always wraps both the
   content wrapper and the dynamic root; targets stay scoped inside the
   legacy content wrappers so dynamic sections are never matched. */
:where(article, main, body):has(.tpk-dynamic-modules-root .tpk-product-resources) .tpk-page-content .tpk-product-section:has(> .tpk-product-download__grid) {display:none;}

/* V23.63: M3 Accessories + M4 Related Projects — Core data renders through the
   dynamic root reusing the legacy tpk-product-accessories__* /
   tpk-product-related__* shapes from product.css. Diffs: the accessory media
   hooks the shared tpk-product-lightbox like the legacy markup does
   (data-tpk-preview-group/src, zoom-in cursor) while the href keeps the
   accessory page as the no-JS fallback; the accessory name becomes an H3 link
   with the theme underline; the related-projects media is a whole-image link
   (text link stays in the H3).
   The legacy hand-written sections hide below when the dynamic ones render. */
.tpk-product.tpk-dynamic-modules-root a.tpk-product-accessories__media {cursor:zoom-in;}
.tpk-product.tpk-dynamic-modules-root div.tpk-product-accessories__media {cursor:default;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__name {margin:0 0 5px;font-size:14px;font-weight:400;line-height:1.35;color:#333;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__name a {display:inline;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--tpk-product-motion-icon) var(--tpk-product-ease);}
.tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__name a:hover,
.tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__name a:focus-visible {background-size:100% 1px;}
.tpk-product.tpk-dynamic-modules-root a.tpk-product-related__media {display:block;cursor:pointer;}
.tpk-product.tpk-dynamic-modules-root .tpk-product-related__info {min-width:0;}

/* V23.63: single source of truth — the hand-written Accessories and Related
   Projects sections inside the body HTML hide when the dynamic versions are
   on the page (same pattern as the Downloads section above; empty Core data
   keeps the legacy sections visible).
   V23.91 FIX: common-ancestor :has() probe (see Downloads note above) —
   the V23.89 .tpk-page-surface wrapper broke the sibling chain. */
:where(article, main, body):has(.tpk-dynamic-modules-root .tpk-product-accessories__list) .tpk-page-content .tpk-product-section:has(> .tpk-product-accessories__list) {display:none;}
:where(article, main, body):has(.tpk-dynamic-modules-root .tpk-product-related__list) .tpk-page-content .tpk-product-section:has(> .tpk-product-related__list) {display:none;}
/* V23.68: case detail pages — the hand-written Related Projects block uses the
   tpk-case__related* classes (a sibling-content :has() twin of the product
   rule above). Both content wrappers are covered: pasted legacy-HTML case
   pages render .tpk-page-content, single-tpk_project renders .tpk-entry-content.
   When the dynamic module renders after either, the legacy block hides; with
   no dynamic data nothing renders and it stays.
   V23.91 FIX: common-ancestor :has() probe (see Downloads note above). */
:where(article, main, body):has(.tpk-dynamic-modules-root .tpk-product-related__list) :where(.tpk-page-content, .tpk-entry-content) .tpk-case__related {display:none;}

/* V23.63: mobile (<=760) — M3/M4 become one-per-view horizontal snap tracks
   per the 2026-09-17 QA sign-off: accessory cards 58% wide, project cards 74%,
   snap center (neighbours peek on both sides), scrollbar hidden. Desktop
   keeps the legacy grids unchanged.
   V23.67: project cards take flex-basis 100% behind a fixed 30px inline
   gutter (percentage bases resolve against the padding-box content area, so
   the 7% gutter made an 86% card resolve back to its old pixel width) — the
   card now clearly grows, every card (first and last included) can rest
   dead-centre, and product.js boots the track at its midpoint so both
   neighbours stay in view on load. */
@media (max-width:760px) {
  .tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__list {display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 16px;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-related__list {display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 30px 16px;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__list::-webkit-scrollbar,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-related__list::-webkit-scrollbar {display:none;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__item {flex:0 0 58%;min-width:0;scroll-snap-align:center;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-related__card {flex:0 0 100%;min-width:0;scroll-snap-align:center;}
}

@media (prefers-reduced-motion:reduce) {
  .tpk-product .tpk-product-resources__all,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-accessories__name a {transition:none;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-title,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl,
  .tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl::before {transition:none;}
  .tpk-product.tpk-dynamic-modules-root .tpk-product-resources__frow-dl::before {transform:none;}
}