/* ==========================================================================
   MOTIONLINK — inner pages (everything except page-home.php)
   Reuses the tokens defined in site.css.
   ========================================================================== */

.ml-inner{padding:clamp(44px,5vw,84px) 0 clamp(64px,7vw,120px);min-height:60vh}
.ml-inner .shell{padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---- breadcrumbs ---- */
.ml-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-5)}
.ml-crumbs a{color:var(--text-2);text-decoration:none}
.ml-crumbs a:hover{color:var(--accent-3)}
.ml-crumbs .sep{opacity:.45}

/* ---- page head ---- */
.ml-page-head{max-width:74ch;margin-bottom:clamp(32px,3.6vw,56px)}
.ml-page-head h1{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.ml-lead{margin-top:var(--sp-4);color:var(--text-2);font-size:1.05rem;line-height:1.65;max-width:62ch}
.ml-page-head--tight{margin-bottom:var(--sp-6)}

/* ---- generic entry content ---- */
.entry-content{color:var(--text-2);font-size:1rem;line-height:1.75}
.entry-content > * + *{margin-top:var(--sp-5)}
.entry-content h2{font-size:var(--fs-h2);color:var(--text);margin-top:var(--sp-7);line-height:1.2}
.entry-content h3{font-size:1.18rem;color:var(--text);margin-top:var(--sp-6)}
.entry-content a{color:var(--accent-3);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.3em;display:grid;gap:var(--sp-2)}
.entry-content img{border-radius:var(--r-md);height:auto}
.entry-content blockquote{border-left:2px solid var(--accent);padding-left:var(--sp-5);color:var(--text)}
.entry-content table{border-collapse:collapse;width:100%}
.entry-content th,.entry-content td{padding:11px 14px;border-bottom:1px solid var(--border);text-align:left}

/* ---- product grid ---- */
.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.prod-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.prod-card:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.prod-card .thumb{position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;
  border-bottom:1px solid var(--border)}
.prod-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease)}
.prod-card:hover .thumb img{transform:scale(1.04)}
.thumb--empty{display:grid;place-items:center;background:var(--surface-2);
  color:var(--text-3);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em}
.prod-card .body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.prod-card h3{font-size:1.04rem;line-height:1.3}
.prod-card h3 a{color:var(--text);text-decoration:none}
.prod-card h3 a:hover{color:var(--accent-3)}
.prod-card p{color:var(--text-2);font-size:var(--fs-sm);flex:1}
.prod-card .line-tag{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}

/* ---- filter chips ---- */
.term-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.term-chips a{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;
  padding:7px 12px;border:1px solid var(--border);border-radius:999px;
  color:var(--text-2);text-decoration:none;transition:all var(--dur) var(--ease)}
.term-chips a:hover{border-color:var(--border-2);color:var(--text)}
.term-chips a.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-3)}

/* ---- single product ---- */
.ml-single{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:start}
.ml-single .media{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;position:sticky;top:calc(var(--header-h) + 24px)}
.ml-single .media img{display:block;width:100%;height:auto}
.ml-spec{margin-top:var(--sp-6);border-top:1px solid var(--border)}
.ml-spec .row{display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr);
  gap:var(--sp-4);padding:12px 0;border-bottom:1px solid var(--border)}
.ml-spec .k{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);padding-top:2px}
.ml-spec .v{font-size:var(--fs-sm);color:var(--text-2)}

.ml-terms{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.ml-terms a{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;
  padding:6px 10px;border:1px solid var(--border);border-radius:4px;
  color:var(--text-3);text-decoration:none}
.ml-terms a:hover{border-color:var(--accent-line);color:var(--accent-3)}

/* ---- CTA band ---- */
.ml-cta{margin-top:clamp(48px,5vw,88px);padding:clamp(28px,3.4vw,52px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;justify-content:space-between}
.ml-cta h2{font-size:clamp(1.3rem,1.2vw + .9rem,1.75rem);line-height:1.25}
.ml-cta p{color:var(--text-2);font-size:var(--fs-sm);margin-top:var(--sp-2);max-width:52ch}

/* ---- pagination ---- */
.ml-pager{display:flex;gap:var(--sp-2);margin-top:var(--sp-7);flex-wrap:wrap}
.ml-pager .page-numbers{font-family:var(--mono);font-size:var(--fs-sm);padding:9px 14px;
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);text-decoration:none}
.ml-pager .page-numbers.current{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-3)}
.ml-pager .page-numbers:hover{border-color:var(--border-2);color:var(--text)}

/* ---- empty state ---- */
.ml-empty{padding:var(--sp-9) 0;text-align:center;color:var(--text-3);
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.06em}

/* ---- responsive ---- */
@media (max-width:1100px){
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ml-single{grid-template-columns:1fr}
  .ml-single .media{position:static}
}
@media (max-width:620px){
  .prod-grid{grid-template-columns:1fr}
  .ml-cta{flex-direction:column;align-items:flex-start}
  .ml-spec .row{grid-template-columns:1fr;gap:4px}
}