/* ---------- Samples page ---------- */
.s-hero { background: var(--ink); color: #fff; padding: clamp(28px,3.6vw,48px) 0; position: relative; overflow: hidden; }
.s-hero::before { content:""; position:absolute; right:-80px; top:-80px; width:360px; height:360px; background:radial-gradient(circle,rgba(214,40,40,0.35),transparent 70%); }
.s-hero-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items:center; position:relative; }
.s-hero h1 { color:#fff; margin-top:14px; }
.s-hero h1 em { font-style:italic; color:#f3d9a7; }
.s-hero p { color:#c7cbd2; margin-top:16px; max-width:46ch; font-size:1.1rem; }
.s-hero .eyebrow { color: var(--red-bright); }
.s-hero-chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.s-hero-chips .pill { background:rgba(255,255,255,0.1); color:#fff; }
.s-hero-chips .pill svg { color:var(--red-bright); }
.s-hero-media { background:var(--paper); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-lg); display:grid; place-items:center; }
.s-hero-media img { max-height:280px; width:auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.25)); }
@media (max-width:860px){ .s-hero-grid{grid-template-columns:1fr} .s-hero-media{display:none} }

/* selection layout */
.sel-wrap { display:grid; grid-template-columns: 1fr 380px; gap:36px; align-items:start; }
@media (max-width:980px){ .sel-wrap{grid-template-columns:1fr} }

.sel-step-label { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.sel-step-label .n { width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:0.95rem;flex-shrink:0; }
.sel-step-label h2 { font-size:1.5rem; }

/* material cards */
.mat-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:40px; }
@media (max-width:560px){ .mat-row{grid-template-columns:1fr} }
.mat-pick { border:1.5px solid var(--line-2); border-radius:var(--r); padding:16px; cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s; background:var(--white); text-align:left; display:flex; gap:14px; align-items:center; }
.mat-pick:hover{ border-color:var(--ink); }
.mat-pick.on { border-color:var(--red); background:var(--red-tint); box-shadow:0 0 0 3px var(--red-tint); }
.mat-pick .mchip { width:46px;height:46px;border-radius:10px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.mat-pick b{ display:block;color:var(--ink);font-size:0.98rem; }
.mat-pick span{ font-size:0.8rem;color:var(--muted); }
.mat-pick .tick{ margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex-shrink:0; }
.mat-pick .tick svg{width:13px;height:13px;color:#fff;opacity:0;}
.mat-pick.on .tick{background:var(--red);border-color:var(--red);} .mat-pick.on .tick svg{opacity:1;}

/* colour groups */
.col-group { margin-bottom:30px; }
.col-group h3 { font-size:1.05rem; font-family:var(--font-sans); font-weight:700; color:var(--charcoal); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.col-group h3::after { content:""; flex:1; height:1px; background:var(--line); }
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px; }
.swatch { cursor:pointer; border-radius:var(--r-sm); overflow:hidden; border:1.5px solid var(--line); background:var(--white); transition:transform .12s, box-shadow .15s, border-color .15s; position:relative; }
.swatch:hover{ transform:translateY(-2px); box-shadow:var(--sh-sm); }
.swatch .chip { height:64px; position:relative; }
.swatch .chip::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,0.04) 0 1px,transparent 1px 9px); }
.swatch .chip.has-img::after{ content:none; }
.swatch .chip img{ display:block; width:100%; height:100%; object-fit:cover; }
.swatch .nm { padding:8px 10px; font-size:0.8rem; font-weight:600; color:var(--charcoal); display:flex; align-items:center; justify-content:space-between; gap:6px; }
.swatch.on { border-color:var(--red); box-shadow:0 0 0 2px var(--red); }
.swatch .sel-tick{ position:absolute; top:7px; right:7px; width:22px;height:22px;border-radius:50%; background:var(--red); display:grid;place-items:center; opacity:0; transform:scale(.6); transition:.15s; }
.swatch.on .sel-tick{ opacity:1; transform:scale(1); }
.swatch .sel-tick svg{ width:13px;height:13px;color:#fff; }
.swatch.disabled{ opacity:.45; pointer-events:none; }

/* sample box (sticky) */
.box { position:sticky; top:calc(var(--header-h) + 16px); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; }
.box-head { background:var(--paper-2); padding:20px 22px; border-bottom:1px solid var(--line); }
.box-head h3 { display:flex; align-items:center; gap:10px; }
.box-head h3 svg{ width:22px;height:22px;color:var(--red); }
.box-count { font-size:0.85rem; color:var(--muted); margin-top:6px; }
.box-count b{ color:var(--ink); }
.box-progress { height:7px; background:var(--stone); border-radius:99px; overflow:hidden; margin-top:12px; }
.box-progress i { display:block; height:100%; width:0; background:var(--red); border-radius:99px; transition:width .25s var(--ease); }
.box-body { padding:18px 22px; }
.box-empty { color:var(--muted); font-size:0.9rem; text-align:center; padding:18px 0; }
.box-empty svg{ width:34px;height:34px;color:var(--line-2);margin:0 auto 8px; }
.box-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.box-chip { display:flex; align-items:center; gap:8px; background:var(--paper-2); border:1px solid var(--line); border-radius:99px; padding:5px 8px 5px 6px; font-size:0.8rem; font-weight:600; color:var(--charcoal); }
.box-chip i { width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex-shrink:0; }
.box-chip button{ width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:rgba(0,0,0,0.05); }
.box-chip button:hover{ background:var(--red); color:#fff; }
.box-chip button svg{ width:11px;height:11px; }

.box-form { border-top:1px dashed var(--line); margin-top:16px; padding-top:18px; }
.box-form .field{ margin-bottom:12px; }
.mini-reassure { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.box-success { display:none; text-align:center; padding:14px; }
.box-success.show{ display:block; }
.box-success .ok{ width:54px;height:54px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;margin:0 auto 12px;}
.box-success .ok svg{ width:28px;height:28px; }

.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:99px; font-size:0.9rem; font-weight:600; box-shadow:var(--sh-lg); opacity:0; pointer-events:none; transition:.25s; z-index:120; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* why / steps */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:760px){ .why-grid{grid-template-columns:1fr} }
.why-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.why-card .ic{ width:52px;height:52px;border-radius:13px;background:var(--red-tint);color:var(--red);display:grid;place-items:center;margin-bottom:16px; }
.why-card .ic svg{ width:26px;height:26px; }
.why-card h3{ font-size:1.2rem;margin-bottom:8px; }
.why-card p{ font-size:0.95rem; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:s; }
@media (max-width:760px){ .steps{grid-template-columns:1fr;gap:20px} }
.step{ padding:0 26px; position:relative; counter-increment:s; }
.step:not(:last-child)::after{ content:""; position:absolute; top:24px; right:0; width:1px; height:calc(100% - 24px); background:var(--line); }
@media (max-width:760px){ .step::after{display:none} }
.step .sn{ width:48px;height:48px;border-radius:50%;border:2px solid var(--red);color:var(--red);display:grid;place-items:center;font-family:var(--font-display);font-size:1.2rem;margin-bottom:16px; }
.step .sn::before{ content:counter(s); }
.step h4{ font-family:var(--font-display);color:var(--ink);font-size:1.18rem;margin-bottom:8px; }
.step p{ font-size:0.94rem; }