/* ---------- 06-legacy.css: ported content component styles ---------- */
/* These components come from snapshots/QL10; the base theme lacked their CSS. */

/* ----- Materials library ----- */
.material-swatch{background:var(--swatch-tone,#dcd8ce);}
.material-swatch > div{position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 6px);}
.material-swatch > span{position:absolute;left:18px;bottom:14px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.85);}
.library-steps{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0;}
.library-steps span{display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--hairline);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600;}
.library-steps b{font-family:var(--font-mono);font-size:12px;color:var(--green);}
.library-note{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 26px;max-width:70ch;}

/* ----- Link grids (techniques / support / design indexes) ----- */
.v2-link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0;}
.v2-link-grid a{display:block;background:#fff;border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:24px;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.v2-link-grid a:hover{transform:translateY(-3px);box-shadow:0 16px 36px -16px rgba(0,0,0,.18);}
.v2-link-grid h2{margin:0 0 8px;font-size:19px;display:flex;align-items:center;gap:10px;}
.v2-link-grid h2 svg{flex:none;color:var(--green);}
.v2-link-grid p{margin:0;font-size:14.5px;color:var(--ink-3);line-height:1.65;}
@media(max-width:900px){.v2-link-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.v2-link-grid{grid-template-columns:1fr;}}

/* ----- Guided customizer (inquiry page) ----- */
.inquiry{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.gc-heading{margin:0 0 26px;}
.gc-heading p{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--muted);margin:0 0 10px;}
.gc-heading h2{margin:0 0 8px;font-size:clamp(26px,4vw,40px);letter-spacing:-.01em;}
.gc-heading > span{display:block;color:var(--ink-3);font-size:16px;}
.gc-steps{display:flex;gap:10px;margin:0 0 26px;flex-wrap:wrap;}
.gc-steps button{display:flex;align-items:center;gap:10px;border:1px solid var(--hairline);
  background:#fff;border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:border-color .25s,background .25s;}
.gc-steps button b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--wash-1);font-size:13px;}
.gc-steps button[aria-current="step"]{border-color:var(--green);background:#f0fdf4;}
.gc-steps button[aria-current="step"] b{background:var(--green);color:#fff;}
.gc-preview{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:26px;margin:0 0 26px;}
.gc-preview-bar{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--hairline);font-weight:700;}
.gc-preview-bar span{display:flex;align-items:center;gap:8px;}
.gc-help{font-size:14px;color:var(--muted);line-height:1.7;margin:18px 0;}
.gc-download{display:inline-flex;align-items:center;gap:8px;margin-top:12px;}
.gc-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;margin:0 0 30px;}
@media(max-width:900px){.gc-layout{grid-template-columns:1fr;}}
.gc-step{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:26px;margin:0 0 18px;}
.gc-step h3{margin:0 0 14px;font-size:19px;}
.gc-choices{display:flex;gap:10px;flex-wrap:wrap;}
.gc-choices button{border:1px solid var(--hairline);background:var(--wash-1);border-radius:12px;
  padding:12px 18px;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .25s;}
.gc-choices button:hover{border-color:var(--green);}
.gc-choices button[aria-pressed="true"]{background:#f0fdf4;border-color:var(--green);color:#166534;}
.gc-caption{font-size:13.5px;color:var(--muted);margin:12px 0 0;line-height:1.6;}
.gc-controls{display:flex;gap:12px;margin-top:20px;}
.gc-actions{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap;}
.gc-primary{background:var(--green);color:#fff;border:0;border-radius:999px;padding:14px 28px;
  font-size:15px;font-weight:700;cursor:pointer;transition:background .25s;}
.gc-primary:hover{background:var(--green-deep);}
.gc-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:16px;}
.gc-consent input{margin-top:3px;flex:none;}
.gc-disclaimer{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);}

/* ----- Inquiry contact form ----- */
.contact{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:30px;margin:30px 0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}
.form-row label{display:block;font-size:13.5px;font-weight:600;margin:0 0 6px;}
.form-row input,.form-row textarea,.form-row select{width:100%;border:1px solid var(--hairline);
  border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;}
.form-row input:focus,.form-row textarea:focus{outline:2px solid var(--green);border-color:var(--green);}
.form-note{font-size:13px;color:var(--muted);line-height:1.6;margin:14px 0;}

/* ----- About intro ----- */
.about{max-width:860px;margin:0 0 30px;}
.about p{font-size:clamp(18px,2.2vw,24px);line-height:1.6;font-weight:500;letter-spacing:-.005em;}
.about > div{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}

/* ----- Products filter guidance ----- */
.v2-filter-guidance{display:flex;align-items:center;gap:10px;background:#f0fdf4;
  border:1px solid #bbf7d0;border-radius:12px;padding:14px 18px;margin:0 0 22px;
  font-size:14.5px;color:#166534;}
.v2-filter-guidance svg{flex:none;}

/* ----- Homepage library sections ----- */
.v2-library{margin-block:56px;}
.v2-library > section{margin:0 0 34px;}
.v2-library h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;}
.v2-all{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  color:var(--ink);text-decoration:none;margin-top:6px;}
.v2-all:hover{color:var(--green);}
.v2-all svg{transition:transform .3s var(--ease);}
.v2-all:hover svg{transform:translateX(4px);}

/* ----- Empty state ----- */
.v2-empty{text-align:center;padding:60px 20px;color:var(--muted);}
.v2-empty h2{color:var(--ink);margin:0 0 10px;}