/* Swag Pack order page (swag.html). Uses the shared tokens in styles.css. */
.sw-gear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:6px}
.sw-gear figure{margin:0}
.sw-shot{background:var(--white);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:8px}
.sw-shot img{max-height:100%;width:auto;object-fit:contain}
.sw-gear figcaption{margin-top:10px;font-family:var(--display);font-weight:900;font-size:20px;line-height:1;text-transform:uppercase}
.sw-facts dd{max-width:60%}

.sw-form{margin-top:4px}
.sw-grid{display:flex;flex-direction:column;gap:30px;padding-top:12px}
.sw-main{display:flex;flex-direction:column;gap:30px}
.sw-two{display:flex;flex-direction:column;gap:4px}
.sw-field{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sw-field label{font-weight:800}
.sw-opt{font-weight:400;color:var(--muted)}
.sw-field input,.sw-field select{width:100%;min-height:50px;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:0}
.sw-field select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 13px) 55%;background-size:7px 7px,7px 7px;background-repeat:no-repeat}
.sw-field input:focus,.sw-field select:focus{outline:3px solid var(--green);outline-offset:2px}
.sw-field [aria-invalid="true"],.sw-field input[aria-invalid="true"]{border-color:#B3261E;box-shadow:3px 3px 0 #B3261E}
.sw-err{margin:0;color:#B3261E;font-weight:700;font-size:14px}
.sw-err:empty{display:none}

.sw-pack{padding-top:14px;margin-top:10px;border-top:2px dashed var(--line)}
.sw-pack:first-of-type{border-top:0;margin-top:0}
.sw-pack[hidden]{display:none}
.sw-pack-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sw-pack-head h3{font-size:26px}
.sw-remove{background:none;border:0;padding:6px 0;min-height:44px;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;cursor:pointer}
.sw-sizes{display:grid;grid-template-columns:1fr;gap:0 12px}
.sw-add{margin-top:16px;align-self:flex-start;min-height:50px;padding:0 16px;background:var(--white);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  font-family:var(--display);font-weight:900;font-size:21px;text-transform:uppercase;cursor:pointer}
.sw-add:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.sw-add[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}

.sw-summary .rows{margin-top:4px}
.sw-summary .rows dt{font-weight:700}
.sw-total{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0 6px;border-top:3px solid var(--ink)}
.sw-total span{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase}
.sw-total b{font-family:var(--display);font-weight:900;font-size:48px;line-height:1}
.sw-submit{width:100%;cursor:pointer;margin-top:6px}
.sw-submit[disabled]{opacity:.6;cursor:progress}
.sw-hp{position:absolute;left:-9999px}
.sw-done,.sw-closed{max-width:640px;margin-top:12px}
.sw-done[hidden],.sw-closed[hidden],.sw-err[hidden]{display:none}
.sw-done h3,.sw-closed h3{font-size:clamp(28px,7vw,40px)}

@media (min-width:600px){
  .sw-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .sw-sizes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sw-gear{gap:24px}
  .sw-gear figcaption{font-size:24px}
}
@media (min-width:900px){
  .sw-grid{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
  .sw-summary{position:sticky;top:calc(90px + env(safe-area-inset-top,0px))}
}
@media (max-width:420px){.sw-facts div{flex-direction:column;gap:2px}.sw-facts dd{max-width:none;text-align:left}}