/* Shop: catalog, product page and cart. Loaded after site.css (shared with justice.engineering),
   and uses only its tokens: 12 columns, 8px unit, the classical type scale. See GRID.md. */
.ph{display:grid;place-items:center;width:100%;height:100%;border:1px dashed var(--rule);color:var(--ink-2)}

/* Catalog masthead facts sit on cols 10-12 */
.shop-facts{border-top:1px solid var(--ink)}
.shop-facts div:last-child{border-bottom:0}

/* Catalog sections: 1px black rule, lettered heading, note on the right */
.cat-section{margin-top:var(--section)}
.page-head + .cat-section{margin-top:var(--u6)}
.page-head + .cat-section .cat-head{border-top:0;padding-top:0}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--u1) var(--u3);flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:var(--u2)}
.cat-head h2{font:500 11px/16px var(--f-mono);letter-spacing:var(--track-caps);text-transform:uppercase;display:flex;gap:var(--u2);align-items:baseline}
.cat-head h2 .mono{display:inline-grid;place-items:center;width:var(--u3);height:var(--u3);background:var(--ink);color:var(--bg);font:500 11px/1 var(--f-mono);letter-spacing:0}
.cat-head p{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}

/* Catalog grid: two items of 6 columns */
ul.catalog{list-style:none;margin:var(--u4) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--u8) var(--g)}
ul.catalog a{display:grid;border:0}
.plate{display:flex;justify-content:space-between;padding-bottom:var(--u1);font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
.plate span:first-child{color:var(--ink)}
.cat-img{display:grid;place-items:center;aspect-ratio:4/3;background:var(--fill);padding:var(--u2);overflow:hidden;outline:1px solid transparent;outline-offset:-1px;transition:outline-color .15s}
.cat-img img{max-width:100%;max-height:100%;display:block;mix-blend-mode:multiply}
.cat-img.bleed{padding:0;background:var(--ink)}
.cat-img.bleed img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;mix-blend-mode:normal}
ul.catalog a:hover .cat-img{outline-color:var(--ink)}
.cat-text{display:grid;gap:var(--u1);padding-top:var(--u2)}
.cat-title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--u2)}
ul.catalog b{font:var(--t-item);letter-spacing:-.01em}
ul.catalog a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.cat-price{font:400 14px/28px var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.cat-sub{color:var(--ink-2);max-width:30em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-text dl.spec-t{margin-top:var(--u1)}

/* Product: picture on cols 1-6, col 7 open, information on cols 8-12 */
.product{padding-top:var(--head-top);grid-template-rows:auto 1fr;row-gap:var(--u4);align-items:start}
.product-img{grid-column:1 / span 6;grid-row:1}
.product-more{grid-column:1 / span 6;grid-row:2;display:grid;gap:var(--u4);min-width:0}
.product-more:empty{display:none}
.product figure{display:grid;gap:var(--u1);min-width:0}
.product figure img,.product figure video{width:100%;height:auto;display:block;background:#4a4f55}
.product figcaption{color:var(--ink-2)}
.product-img.framed{place-items:center;aspect-ratio:4/3;border:1px solid var(--rule);padding:var(--u3)}
.product-img.framed img{width:auto;max-width:100%;max-height:100%;background:none}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--u3) var(--g)}
.gallery a{border:0}
.product-info{grid-column:8 / span 5;grid-row:1 / span 2;display:grid;gap:var(--u3);min-width:0}
.product-info .crumb{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
.product-info .crumb a{border:0}
.product-info h1{font:400 36px/40px var(--f-sans);letter-spacing:-.02em;text-wrap:balance;margin-top:-8px}
.product-info .price{font:400 24px/28px var(--f-sans);font-variant-numeric:tabular-nums}
.product-info .prose{max-width:34em}
.product-info .prose > *{margin-bottom:var(--u2)}
.product-info .subject{color:var(--ink-2);font:var(--t-lead);max-width:30em;text-wrap:pretty;margin-top:calc(-1 * var(--u1))}
.product-info h2{font:500 16px/24px var(--f-sans)}
.product-info .prose h2{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);margin:var(--u4) 0 var(--u2);padding-top:var(--u2);border-top:1px solid var(--rule)}
.product-info .prose > h2:first-child{margin-top:0}
@media (min-width:900px){.product-info h1{font:400 48px/48px var(--f-sans)}}
.editions{display:grid;border-top:1px solid var(--ink)}
.edition{display:grid;gap:var(--u1);padding-block:var(--u2);border-bottom:1px solid var(--rule)}
.edition h2{display:flex;align-items:center;gap:var(--u1)}
.edition p{color:var(--ink-2);font:var(--t-small)}
.tag{display:inline-block;font:400 11px/16px var(--f-mono);text-transform:uppercase;letter-spacing:var(--track-caps);background:var(--ink);color:var(--bg);padding:0 var(--u1);white-space:nowrap}
.files h2{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--u1)}
.files ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.files li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--u2);padding-block:var(--u1);border-bottom:1px solid var(--rule);font:var(--t-small)}
.files li b{font-weight:500;overflow-wrap:anywhere}
.files li > span:not(.mono){grid-column:1 / -1;color:var(--ink-2)}
.files details{grid-column:1 / -1}
.files summary{cursor:pointer;color:var(--ink-2);font:var(--t-label);letter-spacing:var(--track-caps)}
.files code{font:var(--t-data);overflow-wrap:anywhere;color:var(--ink-2)}
.product-info .delivery,.product-info .license{color:var(--ink-2)}
.product-info .license{font:var(--t-small)}
.product-info .license .mono{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink);margin-right:var(--u1)}
.product .price:empty{display:none}

form.buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--u1) var(--u2)}
form.buy label{display:inline-flex;align-items:center;gap:var(--u1);color:var(--ink-2);font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase}
form.buy select,form.buy input,.cart-lines input{font:var(--t-data);color:var(--ink);background:var(--bg);border:1px solid var(--ink);border-radius:0;padding:0 var(--u1);height:40px}
form.buy input,.cart-lines input{width:64px}
button.btn:disabled{cursor:default;background:var(--bg);color:var(--ink-2);border-color:var(--rule)}
.buy-msg{flex-basis:100%;color:var(--ink-2)}
.buy-msg:empty{display:none}

/* Cart and order: cols 1-8 */
.cart{padding-top:var(--u6)}
.cart-body{grid-column:1 / span 8;display:grid;gap:var(--u3);min-width:0}
.cart-empty{font:var(--t-lead)}
ul.cart-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
ul.cart-lines:empty{display:none}
.cart-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--u3);align-items:center;padding-block:var(--u2);border-bottom:1px solid var(--rule)}
.cart-lines b{font:500 16px/24px var(--f-sans)}
.cart-lines small{display:block;margin-top:4px;color:var(--ink-2);font:var(--t-data)}
.cart-lines button{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;background:none;border:0;border-bottom:1px solid var(--rule);color:var(--ink-2);padding:0;cursor:pointer}
.cart-lines button:hover{color:var(--ink);border-color:var(--ink)}
.cart-foot{display:grid;gap:var(--u2);justify-items:start;padding-top:var(--u1)}
.cart-foot b{font:500 24px/28px var(--f-sans);font-variant-numeric:tabular-nums;margin-left:var(--u1)}
.cart-foot .mono{color:var(--ink-2)}

@media (max-width:899px){
  .product{grid-template-rows:none}
  .product-img,.product-info,.product-more,.cart-body{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:599px){
  ul.catalog{grid-template-columns:minmax(0,1fr);row-gap:var(--u6)}
  .gallery{column-gap:var(--u1)}
  .cart-lines li{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--u1)}
}

/* Policy pages (pages/*.md) and the 404 */
.page{padding:var(--u6) 0 var(--u12)}
.page .body{grid-column:1 / span 7;min-width:0;display:block}
.page .body > *{margin-bottom:var(--u2);max-width:34em}
.page .body > h2{max-width:none}
.page .body h2{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);margin:var(--u6) 0 var(--u2);padding-top:var(--u2);border-top:1px solid var(--rule)}
.page .body ul{padding-left:var(--u2)}
.page .body li{margin-bottom:var(--u1)}
.page .body .updated{font:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);margin-top:var(--u6)}
@media (max-width:899px){.page .body{grid-column:1 / -1}}
