/** Shopify CDN: Minification failed

Line 9:0 Unexpected "{"
Line 9:1 Expected identifier but found "%"
Line 10:8 Unexpected "/"
Line 18:1 Expected identifier but found "%"

**/
{%- comment -%}
  assets/smd-track-content.css

  Tokens and rules from DESIGN.md, scoped to .smd-tc.

  The [hidden] rule at the top is load-bearing. Hyper styles bare elements,
  and those rules out-specify the [hidden] attribute, so anything the script
  hides keeps its display value and renders as an empty frame or a broken
  image.
{%- endcomment -%}

.smd-tc [hidden]{display:none!important}

.smd-tc{
  --ink:#000000;
  --soft:#666666;
  --amber:#FFB514;
  --amber-deep:#B87B00;
  --surface:#F7F7F7;
  --rule:#E5E5E5;
  --error:#C4301C;
  --r-sm:8px;
  --r-md:12px;
  --s-xs:6px;
  --s-sm:10px;
  --s-md:16px;
  --s-lg:28px;
  --s-xl:56px;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  color:var(--ink);
  font-size:16px;
  line-height:1.5;
}
.smd-tc, .smd-tc *{box-sizing:border-box}
.smd-tc section,.smd-tc div,.smd-tc figure,.smd-tc p,.smd-tc h2,.smd-tc h3,
.smd-tc article,.smd-tc img,.smd-tc details,.smd-tc summary,
.smd-tc ol,.smd-tc ul,.smd-tc li,.smd-tc span{
  position:static;float:none;transform:none;max-width:none;
  min-height:0;max-height:none;height:auto;overflow:visible;
}
.smd-tc h2,.smd-tc h3{text-transform:none;letter-spacing:normal}
.smd-tc ol,.smd-tc ul{list-style:none;margin:0;padding:0}

/* ---------- bands: one hairline, no alternating fills ---------- */
.smd-tc__band{max-width:1410px;margin:0 auto;padding:var(--s-xl) 20px;border-top:1px solid var(--rule)}
.smd-tc__band h2{margin:0 0 var(--s-sm);font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.005em;max-width:22ch}
.smd-tc__band p{margin:0 0 14px;max-width:62ch}
.smd-tc__lede{color:var(--soft);max-width:62ch;margin-bottom:var(--s-lg)!important}
.smd-tc__note{color:var(--soft);font-size:14px!important}
.smd-tc__sku{display:block;font-family:var(--mono);font-size:11.5px;color:var(--soft);margin-top:auto;padding-top:var(--s-xs)}

/* ---------- exploded view ---------- */
.smd-tc__stage{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s-lg) 20px 14px}
.smd-tc__stage svg{display:block;width:100%;height:auto}
.smd-tc__stage.is-flipped svg{transform:none}
.smd-tc__box{fill:var(--surface);stroke:none}
.smd-tc__lead{stroke:#C8C8C8;stroke-width:1;stroke-dasharray:3 4}
.smd-tc__pin{fill:var(--ink)}
.smd-tc__num{font-family:var(--mono);font-size:13px;fill:#fff;text-anchor:middle}
.smd-tc__cap{font-size:15px;font-weight:600;fill:var(--ink)}
.smd-tc__call{cursor:help}
.smd-tc__call:focus{outline:none}
.smd-tc__call.is-hot .smd-tc__box{fill:#FFF6E6}
.smd-tc__call.is-hot .smd-tc__pin{fill:var(--amber-deep)}
.smd-tc__call.is-hot .smd-tc__lead{stroke:var(--amber-deep);stroke-dasharray:none}
.smd-tc__call.is-off{display:none}
.smd-tc__mark.is-hot rect,.smd-tc__mark.is-hot circle{stroke:var(--amber-deep)}
.smd-tc__readout{margin:var(--s-md) 2px 0!important;font-size:14px;color:var(--soft);max-width:none!important;min-height:1.5em}

/* Below 900 the 1200-unit viewBox renders labels at about four pixels,
   so the drawing steps aside and the tiles carry the content instead. */
@media (max-width:900px){.smd-tc__stage{display:none}}

/* ---------- tiles ---------- */
.smd-tc__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-md);margin-top:var(--s-lg)}
@media (max-width:1100px){.smd-tc__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.smd-tc__tiles{grid-template-columns:1fr}}
.smd-tc__tiles li{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s-md);background:#fff}
.smd-tc__tiles li:hover{box-shadow:inset 0 0 0 1px var(--ink);border-color:var(--ink)}
.smd-tc__tiles img{display:block;width:100%;height:132px;object-fit:contain;background:var(--surface);border-radius:var(--r-sm);margin-bottom:var(--s-sm)}
.smd-tc__tiles h3{margin:0 0 var(--s-xs);font-size:15px;font-weight:600}
.smd-tc__tiles p{margin:0;font-size:14px;color:var(--soft);max-width:none}
.smd-tc__n{flex:none;width:20px;height:20px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--s-sm)}
.smd-tc__also{margin-top:var(--s-lg)}
.smd-tc__also h3{margin:0;font-size:17px;font-weight:600}
.smd-tc__also .smd-tc__note{margin-top:var(--s-sm)!important}

/* On desktop the exploded drawing already names all six parts, so the tile
   row is pure duplication and only exists as the small-screen fallback.
   These rules MUST come after .smd-tc__tiles above: at equal specificity the
   later rule wins, and having them earlier is what let the tiles show on
   desktop alongside the drawing. */
.smd-tc .smd-tc__tiles--parts{display:none}
@media (max-width:900px){
  .smd-tc .smd-tc__tiles--parts{display:grid}
}

/* ---------- control diagrams ---------- */
.smd-tc__ctrl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-xl);align-items:center}
@media (max-width:900px){.smd-tc__ctrl{grid-template-columns:1fr;gap:var(--s-lg)}}
.smd-tc__ctrl h3{margin:0 0 var(--s-sm);font-size:19px;font-weight:600}
.smd-tc__ctrl svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s-sm)}

/* ---------- fullness ---------- */
.smd-tc__fig{margin:0}
.smd-tc__fig svg{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--surface)}
.smd-tc__fig--wide{margin-top:var(--s-lg)}
.smd-tc__fig figcaption{margin-top:var(--s-sm);font-size:13px;color:var(--soft)}

.smd-tc__grid{display:grid;gap:var(--s-lg);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.smd-tc__grid{grid-template-columns:1fr}}
.smd-tc__grid article{border-radius:var(--r-md);padding:var(--s-sm)}
.smd-tc__grid article.is-on{background:#FFF6E6}
.smd-tc__grid article h3{margin:0 0 var(--s-xs);font-size:18px;font-weight:600}
.smd-tc__grid article p{margin:0;font-size:15px}
.smd-tc__grid img{display:block;width:100%;height:auto;border-radius:var(--r-sm);background:var(--surface);margin-bottom:var(--s-sm)}

.smd-tc__wave{fill:none;stroke:var(--amber-deep);stroke-width:1.6;stroke-linecap:round}
.smd-tc__dim{font-family:var(--mono);font-size:11px;fill:var(--soft)}

/* ---------- faq ---------- */
.smd-tc__faq{max-width:78ch}
.smd-tc__faq details{border-bottom:1px solid var(--rule);padding:var(--s-md) 0}
.smd-tc__faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:var(--s-md)}
.smd-tc__faq summary::-webkit-details-marker{display:none}
.smd-tc__faq summary::after{content:"+";color:var(--soft);font-weight:400}
.smd-tc__faq details[open] summary::after{content:"\2013"}
.smd-tc__faq details p{margin:var(--s-sm) 0 0;color:var(--soft);font-size:15px}

@media (prefers-reduced-motion:reduce){.smd-tc *{transition:none!important}}