/* Distinctive Media — print store: cart steppers, checkout, thank-you, policies
   Loads after store.css. */

/* ---------- qty stepper (cart + checkout) ---------- */
.qty-step{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:0;overflow:hidden}
.qty-step button{
  background:var(--night);border:0;color:var(--ink);
  width:28px;height:28px;font-size:0.95rem;cursor:pointer;line-height:1;
  transition:background .2s,color .2s;
}
.qty-step button:hover{background:var(--miami);color:var(--night-2)}
.qty-step span{min-width:26px;text-align:center;font-size:var(--t-caption);font-weight:700}
.pdlg-qty-wrap{margin-top:14px;max-width:140px}
.pdlg-qty-wrap input{
  width:100%;font-family:var(--disp);font-size:var(--t-body);color:var(--ink);
  background:var(--night);border:1px solid var(--line);border-radius:0;padding:12px 14px;
}
/* Focus ring: outline, not box-shadow. Was miami at 0.25 alpha flush on the
   border box — 1.67:1 on --night, 1.72:1 on --panel, under the 1.4.11 3:1
   minimum. Opaque miami held 2px clear reads 9.68:1 on both. */
.pdlg-qty-wrap input:focus-visible{outline:3px solid var(--miami);outline-offset:2px;border-color:var(--miami)}
.cart-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.cart-actions .btn{flex:1;text-align:center;min-width:150px}
.cart-actions .btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- checkout ---------- */
.ck-sec{padding:clamp(30px,4vw,50px) 0 clamp(70px,9vw,110px)}
.ck-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,0.95fr);gap:clamp(24px,4vw,48px);align-items:start}
.ck-block{
  border:1px solid var(--line);border-radius:0;background:var(--panel);
  padding:clamp(20px,3vw,28px);margin-bottom:16px;
}
.ck-block legend{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--miami);padding:0 8px;margin-left:-8px;
}
.ck-row{display:grid;gap:14px}
.ck-2{grid-template-columns:1fr 1fr}
.ck-3{grid-template-columns:1.4fr 0.7fr 0.9fr}
.ck-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.ck-field label{font-size:var(--t-caption);font-weight:700;color:var(--ink)}
.ck-field label i{font-style:normal;color:var(--miami)}
.ck-field input,.ck-field textarea{
  font-family:var(--disp);font-size:var(--t-body);color:var(--ink);
  background:var(--night);border:1px solid var(--line);border-radius:0;padding:12px 14px;width:100%;
  transition:border-color .2s;
}
.ck-field textarea{resize:vertical}
.ck-field input:hover,.ck-field textarea:hover{border-color:oklch(0.4 0.04 250)}
/* This was outline:none with a 1px border-colour swap as the entire focus
   signal — no indicator at all on store-checkout.html. Restored to the site
   ring: 3px so Chrome's fractional-DPR rounding still leaves 2.4px, held 2px
   clear of the field so it lands on the --panel block ground at 9.19:1.
   outline is deliberately absent from the transition list above. */
.ck-field input:focus-visible,.ck-field textarea:focus-visible{
  outline:3px solid var(--miami);outline-offset:2px;border-color:var(--miami);
}
.ck-field.err input,.ck-field.err textarea{border-color:oklch(0.62 0.13 25)}
.ck-hint{font-size:var(--t-caption);color:var(--dim);margin-top:2px}
.ck-radios{display:grid;gap:10px;margin-bottom:6px}
.ck-radio{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:0;padding:14px 16px;background:var(--night);
  transition:border-color .2s,background .2s;
}
.ck-radio:hover{border-color:var(--miami-deep)}
.ck-radio input{margin-top:3px;accent-color:var(--miami);flex-shrink:0}
.ck-radio:has(input:checked){border-color:var(--miami);background:var(--miami-wash)}
.ck-radio b{display:block;font-size:var(--t-body)}
.ck-radio small{display:block;font-size:var(--t-caption);color:var(--dim);margin-top:2px}
.ck-radio a{color:var(--miami);font-weight:600}
.ck-ack{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:0;padding:16px;background:var(--panel);
  font-size:var(--t-caption);color:var(--dim);cursor:pointer;margin-bottom:16px;
}
.ck-ack input{margin-top:3px;accent-color:var(--miami);flex-shrink:0}
.ck-ack a{color:var(--miami);font-weight:600}
.ck-ack.err{border-color:oklch(0.62 0.13 25)}
.ck-submit{width:100%;text-align:center}
/* miami-filled, so the ring goes ink — same reasoning as .pdlg-add in store.css */
.ck-submit:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ck-status{font-size:var(--t-caption);color:oklch(0.72 0.13 25);margin-top:12px;text-align:center;min-height:1.2em}
.ck-status a{color:var(--miami);font-weight:600}

.ck-summary{
  position:sticky;top:90px;
  border:1px solid var(--line);border-radius:0;background:var(--panel);
  padding:clamp(20px,3vw,28px);
}
.ck-summary h2{font-size:var(--t-h4);margin-bottom:6px}
.ck-summary .cart-items{margin:10px 0 16px}
.ck-totals{border-top:1px solid var(--line);padding-top:14px}
.ck-line{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-body);padding:5px 0}
.ck-line.ck-muted{color:var(--dim);font-size:var(--t-caption)}
.ck-line.ck-total{
  font-size:var(--t-h4);font-weight:800;color:var(--ink);
  border-top:1px solid var(--line);margin-top:8px;padding-top:12px;
}
.ck-fineprint{font-size:var(--t-caption);color:var(--dim);margin-top:12px;text-wrap:pretty}
.ck-editlink{display:inline-block;margin-top:14px;font-size:var(--t-caption);font-weight:600;color:var(--miami)}
.ck-done{padding:clamp(70px,10vw,130px) 0;text-align:center}
.ck-done h2{font-size:var(--t-h1)}
.ck-done p{color:var(--dim);margin-top:10px}

/* ---------- thank you ---------- */
.ty-sec{padding:clamp(60px,8vw,110px) 0}
.ty-wrap{max-width:760px;text-align:center}
.ty-wrap h1{font-size:var(--t-page);line-height:1.02;font-stretch:100%;margin-top:8px}
.ty-ref{font-family:var(--disp);font-weight:700;font-size:var(--m-spec);letter-spacing:0.08em;color:var(--dim);margin-top:16px}
.ty-ref b{color:var(--miami)}
.ty-lede{color:var(--dim);font-size:var(--t-lede);margin:16px auto 0;max-width:54ch;text-wrap:pretty}
.ty-steps{list-style:none;counter-reset:ty;text-align:left;margin:38px 0 34px;display:grid;gap:2px}
.ty-steps li{
  counter-increment:ty;position:relative;
  background:var(--panel);border:1px solid var(--line);
  padding:20px 22px 20px 62px;
}
.ty-steps li:first-child{border-radius:0}
.ty-steps li:last-child{border-radius:0}
.ty-steps li::before{
  content:"0" counter(ty);
  position:absolute;left:22px;top:21px;
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;color:var(--miami);
}
.ty-steps b{display:block;font-size:var(--t-body);margin-bottom:3px}
.ty-steps span{font-size:var(--t-body);color:var(--dim);text-wrap:pretty}
.ty-steps a{color:var(--miami);font-weight:600}
.ty-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ty-foot{font-size:var(--t-caption);color:var(--dim);margin-top:26px}
.ty-foot a{color:var(--miami);font-weight:600}

/* ---------- policies ---------- */
.pol-jump{
  position:sticky;top:69px;z-index:30;
  background:oklch(0.16 0.025 265 / 0.92);backdrop-filter:blur(10px);
  border-block:1px solid var(--line);
}
.pol-jump .wrap{display:flex;gap:20px;flex-wrap:wrap;padding-block:13px}
.pol-jump a{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--dim);transition:color .2s;
}
.pol-jump a:hover{color:var(--miami)}
.pol-sec{padding:clamp(46px,6vw,76px) 0;border-bottom:1px solid var(--line)}
.pol-grid{display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);gap:clamp(26px,4vw,60px);align-items:start}
.pol-head h2{font-size:var(--t-h2);line-height:1.06}
.pol-head p{color:var(--dim);font-size:var(--t-body);margin-top:10px;text-wrap:pretty}
.spec-list{display:grid;gap:0}
.spec-list div{
  display:grid;grid-template-columns:minmax(120px,0.42fr) 1fr;gap:16px;
  padding:14px 0;border-top:1px solid var(--line);
}
.spec-list div:last-child{border-bottom:1px solid var(--line)}
.spec-list dt{font-weight:700;font-size:var(--t-body)}
.spec-list dd{color:var(--dim);font-size:var(--t-body);text-wrap:pretty}
.pol-list{list-style:none;display:grid;gap:0}
.pol-list li{
  position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--line);
  color:var(--dim);font-size:var(--t-body);text-wrap:pretty;
}
.pol-list li:last-child{border-bottom:1px solid var(--line)}
.pol-list li::before{
  content:"";position:absolute;left:0;top:21px;
  width:9px;height:9px;border-radius:0;background:var(--miami);
}
.pol-list b{color:var(--ink)}
.pol-callout{
  margin-top:22px;border:1px solid var(--miami-deep);border-radius:0;
  background:linear-gradient(160deg, oklch(0.22 0.05 240), var(--panel) 70%);
  padding:20px 22px;
}
.pol-callout b{display:block;font-size:var(--t-lede);margin-bottom:6px}
.pol-callout p{color:var(--dim);font-size:var(--t-body);text-wrap:pretty}
.pol-callout a{color:var(--miami);font-weight:600}
.pol-body{min-width:0}
.pol-table-wrap{overflow-x:auto}
.pol-table{width:100%;border-collapse:collapse;font-size:var(--t-body);min-width:340px}
.pol-table th{
  text-align:left;font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--miami);
  padding:0 0 10px;border-bottom:1px solid var(--line);
}
.pol-table td{padding:12px 0;border-bottom:1px solid var(--line);color:var(--dim)}
.pol-table td:first-child{color:var(--ink);font-weight:600;padding-right:16px}
.pol-table td:last-child{text-align:right;white-space:nowrap;font-family:var(--disp);font-weight:700;font-size:var(--m-spec)}
.pol-note{font-size:var(--t-caption);color:var(--dim);margin-top:16px;text-wrap:pretty}
.pol-note a{color:var(--miami);font-weight:600}
.pol-sec .faq-list details{background:var(--panel)}

@media (max-width:900px){
  .ck-grid,.pol-grid{grid-template-columns:minmax(0,1fr)}
  .ck-summary{position:static;order:-1}
  .ck-3{grid-template-columns:1fr 1fr}
  .pol-jump{position:static}
}
@media (max-width:640px){
  .ck-2{grid-template-columns:1fr}
  .ck-3{grid-template-columns:1fr}
  .spec-list div{grid-template-columns:1fr;gap:4px}
  .ty-steps li{padding-left:22px;padding-top:44px}
  .ty-steps li::before{top:18px}
}