/* THE NEW LIST PAGES = look 10 Black Wide (Kristian 30 Oct: "This looks absolutly perfect"). Everything sits under body.ll, which only the
   "list-look" transform sets, so no other page can be touched. Measures, colours and the reasons: memory feedback_site_style_black_library.md
   and card_looks_2026-10-30.md. Solid black, true greys (red = green = blue), hairlines, Geist. Saved original of the approved page:
   scripts/data/card-looks-2026-10-30/SAVED-look10-2026-10-30.html. */
body.ll { --sans: 'Geist', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ll-panel: #0A0A0A; --ll-line: rgba(255,255,255,.1); --ll-line2: rgba(255,255,255,.26);
  --ll-ink: #EDEDED; --ll-ink2: #A0A0A0; --ll-ink3: #7D7D7D; --ll-sale: #FF5548;
  background: #000; color: var(--ll-ink); font-family: var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html:has(body.ll) { background: #000; }
body.ll::before, body.ll::after { display: none !important; }
body.ll .reveal { opacity: 1 !important; transform: none !important; }
body.ll .home-footer { background: #000; border-top: 1px solid var(--ll-line); }

body.ll .page-section { padding: 0 0 120px !important; background: #000; }
/* the page grows with the window, so the pictures do too: 400 px cards up to a 1360 px window, 427 at 1440, 507 from 1680 */
body.ll .page-section > .container { box-sizing: border-box; width: 100%; max-width: min(100vw, max(1272px, min(1592px, calc(100vw - 88px)))); margin: 0 auto; padding: 0 16px; }

body.ll .ll-hero { text-align: center; padding: 84px 0 0; }
body.ll .ll-hero h1 { margin: 0; font-size: clamp(42px, 5.6vw, 80px); line-height: 1.05; letter-spacing: -.025em; font-weight: 500; color: #F5F5F5; }
body.ll .ll-hero p { max-width: 672px; margin: 20px auto 0; font-size: 20px; line-height: 1.4; color: var(--ll-ink2); }
body.ll .ll-search { box-sizing: border-box; display: flex; align-items: center; gap: 11px; max-width: 640px; height: 52px; margin: 34px auto 0; padding: 0 17px; border: 1px solid var(--ll-line); border-radius: 12px; background: #0A0A0A; color: var(--ll-ink3); transition: border-color .15s; cursor: text; }
body.ll .ll-search:focus-within { border-color: var(--ll-line2); outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
body.ll .ll-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--ll-ink); font: 400 15px var(--sans); }
body.ll .ll-search input::placeholder { color: var(--ll-ink3); }
body.ll .ll-search input::-webkit-search-cancel-button { filter: invert(1) brightness(.6); }

body.ll :is(.indicators-filter-bar, .addons-filter-bar, .free-tabs) { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; border: 0; background: none; }
body.ll :is(.indicators-filter-chip, .addons-filter-chip, .free-tab) { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 400 13px var(--sans); color: var(--ll-ink2); box-shadow: inset 0 0 0 1px var(--ll-line); cursor: pointer; transition: color .15s, box-shadow .15s; }
body.ll :is(.indicators-filter-chip, .addons-filter-chip, .free-tab):hover { color: var(--ll-ink); border: 0; background: none; box-shadow: inset 0 0 0 1px var(--ll-line2); }
body.ll :is(.chip-count, .free-tab-count, .free-subchip-count) { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ll-ink3); }
body.ll :is(.indicators-filter-chip, .addons-filter-chip, .free-tab).is-active { background: #FFFFFF; color: #000000; font-weight: 500; border: 0; box-shadow: none; }
body.ll :is(.indicators-filter-chip, .addons-filter-chip, .free-tab).is-active :is(.chip-count, .free-tab-count) { color: #666666; }
/* the Free page's second row of filters, one step quieter than the first */
body.ll .free-subfilter { margin: 12px 0 0; min-height: 30px; }
body.ll .free-subrow { flex-wrap: wrap; justify-content: center; gap: 4px; }
body.ll .free-subchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 400 13px var(--sans); color: var(--ll-ink2); cursor: pointer; transition: color .15s, background .15s; }
body.ll .free-subchip:hover { color: var(--ll-ink); background: none; border: 0; }
body.ll .free-subchip.is-active { background: #262626; color: #FFFFFF; font-weight: 500; border: 0; }

body.ll .ll-bar { display: flex; align-items: center; gap: 16px; margin: 32px 0 26px; }
body.ll .ll-bar i { flex: 1 1 0; height: 1px; background: var(--ll-line); }
body.ll .ll-count { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ll-ink3); }
body.ll .ll-kind { display: flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ll-line); }
body.ll .ll-kind button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 400 13px var(--sans); color: var(--ll-ink2); cursor: pointer; transition: color .15s; }
body.ll .ll-kind button:hover { color: var(--ll-ink); }
body.ll .ll-kind button.on { background: #262626; color: #FFFFFF; font-weight: 500; }

/* the cards: the old rules in style.css are switched off here, the names stay because the visit counter finds cards by them.
   !important because those old rules are written against the page's id (#indicators .hcard, width 1189 px and more), which a class cannot beat */
body.ll .hcard-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 0 !important; }
body.ll .hcard.ll-card, body.ll .hcard.ll-card * { box-sizing: border-box; }
body.ll .hcard.ll-card { position: relative !important; display: flex !important; flex-direction: column; width: auto !important; min-width: 0; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: 12px !important; background: var(--ll-panel) !important; box-shadow: inset 0 0 0 1px var(--ll-line) !important; transform: none !important; cursor: default; transition: box-shadow .2s ease; }
body.ll .hcard.ll-card:hover { box-shadow: inset 0 0 0 1px var(--ll-line2) !important; }
body.ll .hcard.ll-card::before, body.ll .hcard.ll-card::after { display: none !important; }
body.ll .hcard.is-filtered-out, body.ll .hcard.ll-hide { display: none !important; }

body.ll .ll-media { display: block; aspect-ratio: 16 / 10; line-height: 0; background: #1F1F1F; border-bottom: 1px solid var(--ll-line); overflow: hidden; }
body.ll .ll-media picture { display: block; height: 100%; }
body.ll .ll-img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* his rule: a picture is never cropped. #1F1F1F = the charts' own background */
body.ll .ll-nopic { display: grid; place-items: center; line-height: 1; }
body.ll .ll-nopic span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8C8C8C; }

body.ll .ll-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 22px 24px 0; }
body.ll .ll-meta { margin: 0 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 16.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.46); }
body.ll .ll-meta i { font-style: normal; margin: 0 6px; color: rgba(255,255,255,.26); }
body.ll .ll-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
body.ll .ll-head .hcard-name { margin: 0; min-width: 0; font-family: var(--sans); font-size: 18px !important; line-height: 24.75px !important; letter-spacing: -.025em !important; font-weight: 500 !important; color: #EDEDED; white-space: normal !important; }
body.ll .ll-head .hcard-name a { color: inherit; text-decoration: none; }
body.ll .ll-price { display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; font-size: 15px; font-weight: 500; color: #EDEDED; font-variant-numeric: tabular-nums; }
body.ll .ll-price s { font-size: 13px; font-weight: 400; color: var(--ll-ink3); }
body.ll .ll-tag { font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
body.ll .ll-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 10px 0 20px; font-size: 14px; line-height: 22.75px; color: var(--ll-ink3); }

body.ll .ll-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; height: 62px; border-top: 1px solid var(--ll-line); }
body.ll .ll-more { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: #D4D4D4; text-decoration: none; cursor: pointer; }
body.ll .ll-more svg { color: var(--ll-ink2); transition: translate .2s ease; }
/* the whole card opens the product, as the old card did (live since 23 Sep): the product name is the one link, stretched across the card, the round + sits above */
body.ll .hcard-name a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
body.ll .hcard.ll-card:hover .ll-more { color: #FFFFFF; }
body.ll .hcard.ll-card:hover .ll-more svg { translate: 3px 0; }
body.ll .ll-sale { flex: 1 1 auto; margin: 0; text-align: right; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ll-sale); }
body.ll .ll-plus { position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ll-ink2); box-shadow: inset 0 0 0 1px var(--ll-line); cursor: pointer; transition: color .15s, box-shadow .15s, background .15s; }
body.ll .ll-plus:hover { color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ll-line2); }
body.ll .ll-plus .i-in { display: none; }
body.ll .ll-plus.is-in { background: #FFFFFF; color: #000000; box-shadow: none; }
body.ll .ll-plus.is-in .i-add { display: none; }
body.ll .ll-plus.is-in .i-in { display: block; }
body.ll :is(.hcard-name a, .ll-more, .ll-plus, .indicators-filter-chip, .addons-filter-chip, .free-tab, .free-subchip):focus-visible, body.ll .ll-kind button:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
body.ll .ll-none { margin: 44px 0 0; text-align: center; font-size: 15px; color: var(--ll-ink2); }
body.ll .ll-none a, body.ll .ll-reset { color: var(--ll-ink); text-decoration: underline; text-underline-offset: 3px; }
body.ll .ll-reset { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
body.ll .ll-nb { white-space: nowrap; }
/* footer links on these pages: whole pixels */
body.ll .hf-email, body.ll .hf-col a { font-size: 13px; }
/* the Notify box, in the look */
body.ll .notify-dialog { background: #0A0A0A; border: 1px solid var(--ll-line2); border-radius: 12px; font-family: var(--sans); }
body.ll .notify-close { font-family: var(--sans); }
body.ll .notify-label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ll-ink2); }
body.ll .notify-title { font-family: var(--sans); font-weight: 500; letter-spacing: -.025em; color: #fff; }
body.ll .notify-title span { color: #fff; }
body.ll .notify-sub { font-family: var(--sans); color: var(--ll-ink2); }
body.ll .notify-input { background: #000; border: 1px solid var(--ll-line2); border-radius: 10px; color: #fff; font-family: var(--sans); font-size: 16px; }
body.ll .notify-input:focus { border-color: rgba(255,255,255,.7); }
body.ll .notify-input::placeholder { color: var(--ll-ink3); }
body.ll .notify-submit { flex: 0 0 auto; padding: 0 22px; border-radius: 999px; background: #fff; color: #000; font: 500 14px var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
body.ll .notify-submit:hover { background: #E9E9E9; }
body.ll .notify-success { font-family: var(--sans); color: var(--ll-ink); }
@media (prefers-reduced-motion: reduce) { body.ll .ll-more svg, body.ll .hcard.ll-card { transition: none !important; } body.ll .hcard.ll-card:hover .ll-more svg { translate: none; } }

/* the "Added to your cart" box */
body.ll .cart-added { background: #0A0A0A; border: 1px solid var(--ll-line2); border-radius: 12px; box-shadow: none; font-family: var(--sans); }
body.ll .cart-added .ca-h, body.ll .cart-added .ca-one b, body.ll .cart-added .ca-tot b { font-weight: 500; }
body.ll .cart-added .ca-go { border-radius: 999px; font-weight: 500; }
body.ll .cart-added .ca-keep { border-radius: 999px; font-weight: 500; border-color: var(--ll-line2); }
body.ll .cart-added .ca-x { font-family: var(--sans); }
body.ll .cart-added .ca-one { font-size: 15px; }
body.ll .cart-added .ca-one small { font-size: 13px; }
body.ll .cart-added .ca-alt a:hover { color: #A0A0A0; }
body.ll .hf-copy, body.ll .hf-legal p, body.ll .hf-legal b { color: #7D7D7D; }

@media (max-width: 1120px) { body.ll .hcard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  body.ll .ll-hero { padding-top: 54px; }
  body.ll .ll-hero h1 { font-size: 44px; line-height: 1.08; }
  body.ll .ll-hero p { font-size: 17px; }
  body.ll .ll-search input { font-size: 16px; }   /* under 16 px an iPhone zooms the page in when the box is tapped */
  body.ll :is(.indicators-filter-bar, .addons-filter-bar, .free-tabs) { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; margin: 18px -16px 0; padding: 0 16px; scrollbar-width: none; }
  body.ll :is(.indicators-filter-chip, .addons-filter-chip, .free-tab, .free-subchip) { flex: 0 0 auto; white-space: nowrap; }
  body.ll .free-subrow { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  body.ll .ll-bar { margin: 24px 0 18px; }
  body.ll .ll-bar i:first-child { display: none; }
}
@media (max-width: 640px) { body.ll .hcard-list { grid-template-columns: 1fr; } }