/* ==========================================================================
   KODE GARMENT — shared styles for the blanks pages
   blanks-catalogue.php and blanks-style.php: the catalogue's colour tokens
   mapped to the site palette, buttons, icons and the FAQ list.
   Loads after site.css, before catalogue.css or blanks-order.css.
   ========================================================================== */

/* ---------- tokens: the catalogue's names, mapped to the site's palette ---------- */
[data-bc],[data-oc]{
  --kg-ink:var(--ink); --kg-ink-soft:var(--ink-2); --kg-muted:var(--mid);
  --kg-ground:#FFFFFF; --kg-panel:#F1F1F3; --kg-panel-2:#E6E6E9;
  --kg-line:var(--line); --kg-line-soft:#ECECEF;
  --kg-accent:var(--kode); --kg-accent-ink:var(--kode-ink); --kg-accent-wash:#FFF1E6;
  --kg-ok:#15803D; --kg-warn:#B45309; --kg-stop:#C22F21;
  --kg-font-display:var(--d); --kg-font-body:var(--b); --kg-font-mono:var(--m);
}
.c-blanks{background:#F4F4F5}
.c-blanks .hd{background:rgba(244,244,245,.86)}
.c-blanks .mnav{background:#F4F4F5}

/* ---------- shared pieces the catalogue markup uses ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.kg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.kg-ico{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kgn-a{stroke:var(--kg-ico-accent,var(--kg-accent))}
.kgn-d{stroke-dasharray:1.7 1.9}
.kgn-t{stroke-width:2.5}
:is([data-bc],[data-oc]) :is(h1,h2,h3,h4){font-family:var(--kg-font-display);font-weight:800;letter-spacing:-.022em;line-height:1.02;text-wrap:balance;margin:0}
:is([data-bc],[data-oc]) p{margin:0}
:is([data-bc],[data-oc]) :where(a,button,input,select,summary):focus-visible{outline:2px solid var(--kg-accent);outline-offset:2px;border-radius:2px}
.kg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--kg-font-body);font-size:16px;font-weight:600;
  padding:14px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.kg-btn--primary{background:var(--kg-accent);color:#fff}
.kg-btn--primary:hover{background:var(--ink)}
.kg-btn--ghost{background:transparent;color:var(--kg-ink);border-color:var(--kg-line)}
.kg-btn--ghost:hover{border-color:var(--kg-ink)}
.kg-btn--quiet{background:var(--kg-panel);color:var(--kg-ink)}
.kg-btn--quiet:hover{background:var(--kg-panel-2)}
.kg-btn:active{transform:translateY(1px)}
.kg-btn--sm{padding:9px 16px;font-size:15px}

.kg-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- FAQ ---------- */
.fq{padding:clamp(70px,8vw,130px) 0}
.fq__g{display:grid;gap:clamp(28px,4vw,72px)}
@media(min-width:980px){
  .fq__g{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
  .fq__hd{position:sticky;top:calc(var(--hd) + var(--tick) + 32px)}
}
.fq__h{font-size:clamp(40px,5vw,84px);margin-top:14px}
.fq__h em{font-style:normal;color:var(--kode)}
.fq__note{margin:18px 0 0;font-size:17px;line-height:1.6;color:var(--mid);max-width:38ch}
.fq__note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--kode);text-underline-offset:3px}
.fq__list{display:grid;gap:10px}
.fq__it{border-radius:18px;background:#fff;border:1px solid #E4E4E7;box-shadow:0 1px 2px rgba(18,18,20,.04),0 12px 32px -18px rgba(18,18,20,.18)}
.fq__it[open]{border-color:#D4D4D8}
.fq__q{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;cursor:pointer;list-style:none}
.fq__q::-webkit-details-marker{display:none}
.fq__q h3{margin:0;font-family:var(--b);font-size:clamp(16.5px,1.3vw,19px);font-weight:600;line-height:1.35;letter-spacing:0;color:var(--ink)}
.fq__q:focus-visible{outline:2px solid var(--kode);outline-offset:2px;border-radius:18px}
.fq__pm{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:#F1F1F3;transition:background .25s}
.fq__pm::before,.fq__pm::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;border-radius:2px;background:var(--ink);transition:transform .3s,background .25s}
.fq__pm::after{transform:rotate(90deg)}
.fq__it[open] .fq__pm{background:#4FAEEA}
.fq__it[open] .fq__pm::before,.fq__it[open] .fq__pm::after{background:#fff}
.fq__it[open] .fq__pm::after{transform:rotate(0)}
.fq__a{margin:0;padding:0 22px 22px;font-size:16px;line-height:1.65;color:var(--mid);max-width:70ch}