brand.css

1/* OPENER */23.opener { max-width: 20rem; margin: 0 auto var(--s5); }45/* GRID */67.gallery.square { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }8.gallery.square img { aspect-ratio: 1; image-rendering: auto; object-fit: cover; }9.tile h2 { font-size: 0.95rem; }10.tile p.num { color: var(--fg); }1112/* STRIP */1314.strip { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }15.strip img { width: 88px; height: 88px; image-rendering: pixelated; border: var(--hair); border-radius: var(--r1); background: var(--art); }16.strip a:hover img { border-color: var(--accent); }1718/* DOWNLOADS */1920[data-downloads] { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; }21[data-downloads] a { font-family: var(--mono); font-size: 0.75rem; }2223/* CONTROLS */2425.price { font-size: 1.4rem; margin-bottom: var(--s3); }26.sizes { margin-bottom: var(--s3); }27.sizes button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }28button.primary[data-add] { width: 100%; justify-content: center; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }29button.primary[data-add]:disabled { opacity: 0.4; cursor: not-allowed; }30.buy { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; margin-top: var(--s2); border: var(--hair); border-radius: var(--r2); color: var(--fg); }31.buy:hover { border-color: var(--accent); text-decoration: none; }32.buy[aria-disabled] { opacity: 0.4; pointer-events: none; }33.count { font-family: var(--mono); font-size: 0.8rem; color: var(--dim); margin: var(--s3) 0; }34[data-share] { width: 100%; justify-content: center; }35.controls > .button { width: 100%; margin-top: var(--s3); }36.filter { display: block; font-family: var(--mono); padding: var(--s2) 0; }37.tabs.stack { flex-direction: column; gap: var(--s1); margin-top: var(--s3); }38.tabs.stack a { display: block; padding: var(--s1) var(--s2); color: var(--dim); }39.tabs.stack a:hover { color: var(--fg); text-decoration: none; }4041/* CART */4243.item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: var(--hair); }44.item img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r1); background: var(--art); }45.item .who a { color: var(--fg); font-weight: 600; }46.qty { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }47.qty button { min-width: 2rem; justify-content: center; padding: 0; }48.sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }49.sum .buy { flex: 1 1 12rem; background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }5051@media (max-width: 40rem) {52  .item { grid-template-columns: 64px minmax(0, 1fr); }53  .item img { width: 64px; height: 64px; }54}5556/* ELSEWHERE */5758.elsewhere { margin-top: var(--s5); }59.elsewhere h2 { font-size: 0.95rem; margin-bottom: var(--s3); }60.elsewhere ul { margin: 0; }61.elsewhere a { font-size: 0.85rem; }