/* The store product card, shared. WHY THIS FILE EXISTS. These rules lived inline in shop/index.html, which was fine while /shop/ was the only page that rendered a product. The home page shows a row of the same products from 2026-08-08 (assets/js/kc-store.js binds to [data-kc-store-grid] wherever it finds one), and a card whose look lives in one page's renders as raw images and blue underlined links on any other. Copying the block would be two copies to keep in step, so the card's look moved out here with the card's behaviour, and both pages link it. THE GRID IS NOT HERE, deliberately. /shop/ wants a full four-column catalog page and the home page wants one row, so each page owns its own container rules; only the card itself is shared. Both themes come free: every colour below is a --wt-* token that assets/cdo-watchtower.css redefines under data-mode="batman". */ .kc-store-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--wt-surface); border: 1px solid var(--wt-rule); border-radius: 14px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .kc-store-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); border-color: var(--wt-link); } .kc-store-card:focus-visible { outline: 3px solid var(--wt-link); outline-offset: 2px; } /* contain, not cover: a print or a folded tee must never be cropped to fill. */ .kc-store-card__media { display: block; aspect-ratio: 1 / 1; background: #f4f2ec; overflow: hidden; border-bottom: 1px solid var(--wt-rule); } .kc-store-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .kc-store-card__noimg { display: block; width: 100%; height: 100%; background: #ece7dc; } .kc-store-card__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1 1 auto; } /* Two lines, then ellipsis: product titles run long and a card that grows to fit one of them makes the whole row ragged. */ .kc-store-card__title { font-size: .92rem; line-height: 1.35; font-weight: 600; color: var(--wt-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* THE GARMENT IS METADATA, THE PHRASE IS THE PRODUCT. Splitting them is what turns "KEEP CALM AND MAKE A HAPPY MEMORY Tri-Blend Tee" repeated forty times into a grid a person can actually scan. kc-store.js splitTitle() supplies the two halves; the full title stays on the link's accessible name. */ .kc-store-card__garment { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wt-ink-quiet); font-weight: 700; margin-top: -2px; } .kc-store-card__meta { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .kc-store-card__price { font-weight: 700; color: var(--wt-ink); font-size: .98rem; } .kc-store-card__view { font-weight: 700; font-size: .82rem; letter-spacing: .02em; color: var(--wt-link); } @media (prefers-reduced-motion: reduce) { .kc-store-card { transition: none; } .kc-store-card:hover { transform: none; } }