/* Site: cart, checkout and order pages, and the lines and footer inside the cart drawer (the drawer
   frame is ui.css, the site build's). Gallery Wall school; tokens from site.css. Owned by the
   checkout build. --field (D4) falls back to --line until site.css has it. */

.b-cart,.b-checkout,.b-done{padding-block:clamp(40px,6cqi,84px) clamp(72px,9cqi,120px)}
.b-cart h1,.b-checkout h1{font-size:clamp(44px,6cqi,84px);margin-bottom:clamp(24px,3.4cqi,44px)}
.b-cart-empty .b-empty a{font-family:var(--body);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);vertical-align:middle;margin-left:10px}

/* one-line messages after an action */
.b-flash{font-size:15px;border-left:2px solid var(--accent);padding:2px 0 2px 12px;margin-bottom:18px;max-width:40em}
.b-checkout .b-err{display:grid;gap:6px;margin-bottom:24px;max-width:40em}

.b-cart-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5cqi,80px);align-items:start}

/* cart lines */
.b-cart-lines{border-top:1px solid var(--line)}
.b-cart-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;padding-block:20px;border-bottom:1px solid var(--line);align-items:start}
.b-cart-ph .ph{aspect-ratio:4/5}
.b-cart-info{display:grid;gap:6px;justify-items:start;min-width:0}
.b-cart-name{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2cqi,27px);line-height:1.05;overflow-wrap:anywhere}
.b-cart-name a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.b-cart-unit{font-size:14px}
.b-cart-unit s{margin-left:6px}
.b-cart-gift{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.b-cart-problem{font-size:14px;color:var(--panel);border-left:2px solid var(--panel);padding-left:10px}
.b-cart-line.is-out .b-cart-ph{opacity:.45}
.b-cart-price{font-family:var(--display);font-weight:300;font-size:24px;white-space:nowrap}
.b-qty{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.b-qty button[value="dec"],.b-qty button[value="inc"]{width:44px;height:44px;border:1px solid var(--line);background:var(--ground);border-radius:2px;font-size:18px;line-height:1;display:grid;place-items:center}
.b-qty button[value="dec"]:hover,.b-qty button[value="inc"]:hover{border-color:var(--ink)}
.b-qty button[disabled]{color:var(--line);cursor:default;border-color:var(--line)}
.b-qty > span{min-width:28px;text-align:center;font-size:16px}
.b-qty-remove,.b-linkbtn{background:none;border:0;padding:0 0 3px;border-bottom:1px solid currentColor;font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.b-qty-remove{margin-left:10px}
.b-qty-remove:hover,.b-linkbtn:hover{color:var(--ink)}

/* summary column */
.b-sum{display:grid;gap:22px;position:sticky;top:24px;background:var(--soft);padding:clamp(20px,2.6cqi,32px)}
.b-totals{display:grid;gap:10px;font-size:15px}
.b-totals > div{display:flex;justify-content:space-between;gap:16px}
.b-totals dt{color:var(--muted)}
.b-totals dd{margin:0;white-space:nowrap}
.b-totals .is-total{border-top:1px solid var(--line);padding-top:14px;margin-top:4px;align-items:baseline}
.b-totals .is-total dt{color:var(--ink);font-family:var(--body);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.b-totals .is-total dd{font-family:var(--display);font-weight:300;font-size:clamp(28px,3cqi,36px);line-height:1}
.b-code{display:grid;gap:8px}
.b-code label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.b-code > div{display:flex}
.b-code input{border:1px solid var(--line);border-right:0;background:var(--ground);padding:12px 14px;font-size:16px;border-radius:2px 0 0 2px;text-transform:uppercase;letter-spacing:.06em}
.b-code input::placeholder{color:var(--muted);opacity:.7}
.b-code input:focus{border-color:var(--ink);outline:none}
.b-code button{flex:none;background:var(--ink);color:var(--ground);border:0;padding:0 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-radius:0 2px 2px 0}
.b-applied{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14.5px}
.b-applied > span{min-width:0}
.b-applied form{flex:none}
.b-applied .b-caps{color:var(--muted);margin-right:6px}
.b-applied .b-linkbtn{min-height:24px;padding-block:4px 3px}
.b-sum-go{width:100%}
.b-sum > a.b-line{justify-self:start;padding-block:4px}
.b-sum-items{display:grid;gap:14px}
.b-sum-items li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;font-size:15px}
.b-sum-items .ph{aspect-ratio:4/5}
.b-sum-items b{font-weight:400;display:block;overflow-wrap:anywhere}
.b-sum-items li > span:last-child{white-space:nowrap}

/* checkout form */
.b-co-form{align-content:start}
.b-co-form .f{min-width:0}
.b-co-method{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.b-co-method a{text-align:center;padding:14px 10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.b-co-method a + a{border-left:1px solid var(--line)}
.b-co-method a[aria-current]{background:var(--panel);color:var(--on-panel)}
.b-co-go{display:grid;gap:10px;justify-items:start}
.b-co-form .b-btn{border:0}
.b-co-form select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}

/* test payment */
.b-testpay form{display:grid;justify-items:center}
.b-thanks .b-testpay-no{font-family:var(--body);font-size:11.5px;letter-spacing:.24em}

/* thank you */
.b-done-head{text-align:center;display:grid;justify-items:center;gap:18px;margin-bottom:clamp(36px,5cqi,64px)}
.b-done-head h1{font-size:clamp(44px,6cqi,84px)}
.b-done-lead{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.6cqi,30px);line-height:1.3;max-width:24em}
.b-done-main{display:grid;gap:clamp(28px,4cqi,44px);align-content:start}
.b-done-sec{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:20px}
.b-done-sec h2{font-size:clamp(26px,2.6cqi,32px)}
.b-done-sec p{font-size:16px;line-height:1.7}
.b-done-next{font-size:16.5px;line-height:1.7;max-width:34em}
.b-cards{display:grid;gap:12px}
.b-cards li{display:grid;gap:4px;font-size:14.5px;color:var(--muted)}
.b-giftcode{font-size:20px;letter-spacing:.18em;color:var(--ink)}


/* cart lines: what the line is and what changed */
.b-cart-opts{letter-spacing:.2em}
.b-cart-fact{font-size:14px;color:var(--muted)}
.b-cart-note{font-size:14px;border-left:2px solid var(--accent);padding-left:10px}
.b-sum-nudge,.b-dl-nudge{font-family:var(--display);font-weight:300;font-size:21px;line-height:1.3}
.b-away{border-left-color:var(--muted)}

/* checkout: the Delivery group (works without JavaScript; pickup hides the address with :has) */
.b-co-ship{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.b-co-ship legend{padding:0;margin-bottom:12px;font-family:var(--body);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.b-co-opts{display:grid;gap:8px}
/* a delivery choice and the email checkbox are labels inside .b-form, so they undo its caps labels */
.b-co-form .b-co-opt,.b-co-form .b-co-check{font-family:var(--body);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
.b-co-form .b-co-update{background:none;color:var(--ink);border:0;border-bottom:1px solid currentColor;padding:8px 0 3px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.b-co-form .b-co-update:hover{color:var(--accent)}
.b-co-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--field,var(--line));border-radius:2px;padding:14px 16px;cursor:pointer}
.b-co-opt input{width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
.b-co-opt:has(input:checked){border-color:var(--ink);background:var(--soft)}
.b-co-opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.b-co-opt:hover{border-color:var(--muted)}
.b-co-opt-t{display:grid;gap:2px;min-width:0}
.b-co-opt-n{font-size:16px}
.b-co-opt-d{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.b-co-opt-d:empty{display:none}
/* checkout.js keeps the totals live, so Update total is only the no-JS path */
.b-co-form.is-live .b-co-update{display:none}
/* checkout.js hides a method that can't take the cart, and the pay button while nothing can */
.b-co-opt[hidden],.b-co-pay[hidden]{display:none}
.b-co-opt-p{font-family:var(--display);font-weight:300;font-size:21px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.b-co-why{font-size:14px;color:var(--panel);border-left:2px solid var(--panel);padding-left:10px}
.b-co-update{justify-self:start;min-height:24px}
.b-co-abroad{font-size:14px;color:var(--muted)}
.b-co-abroad a{display:inline-block;padding-block:2px}
.b-co-addr{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.b-co-form:has(.b-co-opt input[data-kind="pickup"]:checked) .b-co-addr{display:none}
.b-co-check{display:flex;align-items:center;gap:12px;font-size:15px;cursor:pointer;min-height:24px}
.b-co-check input{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.b-co-form textarea{resize:vertical}
.b-co-totals[aria-busy="true"] .b-totals{opacity:.6}
.b-sum-items .b-caps{display:block;margin-top:2px;font-size:10.5px}

/* the cart drawer's body (GET /cart/drawer): lines, then a footer that stays in view */
.b-drawer-body{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:100%}
.b-drawer-empty{display:grid;align-content:start;justify-items:start;gap:18px;padding:8px 0}
.b-dl{border-top:1px solid var(--line);align-self:start}
.b-dl-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;padding-block:18px;border-bottom:1px solid var(--line);align-items:start}
.b-dl-ph .ph{aspect-ratio:4/5}
.b-dl-line.is-out .b-dl-ph{opacity:.45}
.b-dl-info{display:grid;gap:5px;justify-items:start;min-width:0}
.b-dl-name{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.15;overflow-wrap:anywhere}
.b-dl-name:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.b-dl-info .b-caps{font-size:10.5px}
.b-dl-qty{margin-top:4px}
.b-dl-qty .b-qty-remove{margin-left:6px;white-space:nowrap}
.b-dl-price{font-family:var(--display);font-weight:300;font-size:21px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;line-height:1.1}
.b-dl-foot{position:sticky;bottom:0;background:var(--ground);display:grid;gap:12px;padding-block:18px 4px;border-top:1px solid var(--line)}
.b-dl-away{font-size:14px;border-left:2px solid var(--muted);padding-left:10px}
.b-dl-foot .b-totals .is-total{border-top:0;padding-top:0;margin-top:0}
.b-dl-go{width:100%}
.b-dl-cart{justify-self:center}
.b-qty button{min-width:24px;min-height:24px}
.b-qty button[value="dec"],.b-qty button[value="inc"]{border-color:var(--field,var(--line))}

@container site (max-width:760px){
  .b-cart-grid{grid-template-columns:1fr}
  .b-sum{position:static}
  .b-cart-line{grid-template-columns:72px minmax(0,1fr) auto;gap:14px}
  .b-cart-price{font-size:21px}
  .b-checkout .b-sum{order:-1}
  .b-co-addr{grid-template-columns:1fr}
  .b-cart h1,.b-checkout h1{margin-bottom:18px}
}