/* Print Buddy: styles for the sample pack page. Split out of site.css on 19 Oct 2026 (speed: every shop page loaded all of it);
   linked right after site.css by sample-pack.html. New rules that only these pages use go here; see docs/STYLE-GUIDE.md. */
/* ======================================================================
   PHONES FIRST (Junaid, 15 Oct 2026): one sticky bar, a menu drawer, the product page in money-making order
   (picture, options, price, basket; the trust points and templates card after), the hero picture back, account tabs.
   ====================================================================== */
.spk{padding-bottom:64px}
.spk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start;margin-top:12px}
.spk-intro h1{margin:6px 0 12px;font-size:clamp(28px,4vw,40px);line-height:1.12}
.spk-lead{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 26px;max-width:480px}
.spk-points{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.spk-points li{display:flex;gap:14px;align-items:flex-start}
.spk-points li>span:last-child{font-size:13.5px;color:var(--muted);line-height:1.55}
.spk-points b{display:block;color:var(--ink);font-size:14px;font-weight:500;margin-bottom:2px}
.spk-ic{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center}
.spk-note{margin:26px 0 0;padding:14px 16px;border-left:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:13px;color:var(--muted);line-height:1.55;max-width:480px}
.spk-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:26px 26px 22px;box-shadow:0 1px 2px rgba(20,24,28,.04),0 18px 40px -26px rgba(20,24,28,.25)}
.spk-card h2{margin:0 0 16px;font-size:19px;font-weight:500}
.spk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spk-card label{display:block;font-size:12.5px;font-weight:500;margin:12px 0 6px}
.spk-card label small{font-weight:500;color:var(--muted)}
.spk-card input,.spk-card select,.spk-card textarea{width:100%;border:1px solid var(--input);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;color:var(--ink)}
.spk-card textarea{resize:vertical;line-height:1.5}
.spk-card .full,.spk-full{grid-column:1/-1}
.spk-full+.spk-full input{margin-top:8px}
.spk-card .bad{border-color:var(--danger);box-shadow:0 0 0 3px rgba(166,69,69,.12)}
.spk-go{width:100%;justify-content:center;margin-top:20px}
.spk-fine{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.spk-done{text-align:center;padding:18px 6px}
.spk-done h2{margin:12px 0 8px}
.spk-done p{margin:0}
.spk-done a{font-weight:500}
.spk-tick{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);color:var(--ok,var(--success))}
.spk-tick.warn{color:var(--attn,var(--warning))}
@media (max-width:900px){.spk-grid{grid-template-columns:1fr;gap:28px}
.spk-card{padding:20px 16px 18px}}
@media (max-width:480px){.spk-row{grid-template-columns:1fr;gap:0}}