/* Collection, set/filter and item pages (CZ-6653). These pages are FLAT (ViewData["Flat"], see ".page--flat" in site.css): they sit on the same wide
   shell and gutters as /checklists, with no nested white panel. This file only places content inside that shell; the shared header is untouched.
   Prose is held to a readable measure (never stretched across the window); the extra width goes to the collection header, the guide's side rail,
   the checklist choices and the item grid. Loaded after checklists.css, which keeps the component styling. */
.cl-wide { padding-top: 18px; --prose-max: 760px; }
.cl-wide .breadcrumbs { margin-bottom: 2px; }
.cl-wide .section { border-bottom-color: var(--cl-line, #E4DED2); }

/* Collection header: ONE surface in the list's own stored colors (no cream well beside a black panel, so no seam). The cover is shown whole at its natural
   shape (portrait, square or landscape), never stretched, never upscaled past its pixels, never cropped, with even padding on every side and its own rounded
   corners and a hairline ring drawn from the stored text color (so a light cover on a light list, or a dark one on black, still has an edge). The title block
   sits beside it, content-sized: the header fills the shared shell (no inner cap). */
.cl-wide .cl-collection-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: 14px;
  border: 1px solid var(--cl-line, #E4DED2); border-radius: 14px; background: var(--cl-card-bg, #fff); color: var(--cl-card-ink, #000); }
.cl-wide .cl-collection-coverbox { background: transparent; padding: 20px 20px 0; }
.cl-wide .cl-collection-cover { width: auto; max-width: min(100%, 500px); height: auto; max-height: 340px; aspect-ratio: auto; object-fit: contain; border-radius: 12px;
  outline: 1px solid color-mix(in srgb, var(--cl-card-ink, #000) 22%, transparent); outline-offset: -1px; }
.cl-wide .cl-collection-title { padding: 22px 24px 26px; }
.cl-wide .cl-collection-namerow { gap: 18px; }
.cl-wide .cl-collection-cta { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
/* The button is drawn from the stored colors, inverted, so it is always readable whatever the list chose (a red button on a red list would vanish). */
.cl-wide .cl-collection-cta .btn { padding: 12px 24px; background: var(--cl-card-ink, #000); color: var(--cl-card-bg, #fff); border-color: var(--cl-card-ink, #000); }
.cl-wide .cl-collection-cta .btn:focus-visible, .cl-wide .cl-collection-cta__more:focus-visible { outline: 3px solid var(--cl-card-ink, #000); outline-offset: 3px; }
@media (min-width: 900px) {
  /* The cover area is ONE fixed size on every collection page (500 x 340 of picture plus the 24 px padding), whatever shape the cover is, so the picture and the
     title always start in the same place from page to page. A portrait, square or landscape cover is centered whole inside it (never stretched or cropped). */
  .cl-wide .cl-collection-head:has(.cl-collection-coverbox) { grid-template-columns: 548px minmax(0, 1fr); }
  .cl-wide .cl-collection-coverbox { padding: 24px; box-sizing: border-box; height: 388px; display: flex; align-items: center; justify-content: center; }
  .cl-wide .cl-collection-title { padding: 24px clamp(28px, 4vw, 64px) 24px 12px; }
  .cl-wide .cl-collection-head:not(:has(.cl-collection-coverbox)) .cl-collection-title { padding: 32px clamp(28px, 4vw, 64px); }
  .cl-wide .cl-collection-title .display { font-size: clamp(34px, 3.4vw, 56px); }
  .cl-wide .cl-collection-title .lede { font-size: 19px; max-width: 52ch; }
  .cl-wide .cl-collection-icon { flex-basis: 56px; max-width: 56px; max-height: 56px; }
}
@media (max-width: 560px) {
  .cl-wide .cl-collection-coverbox { padding: 16px 16px 0; }
  .cl-wide .cl-collection-title { padding: 18px 16px 20px; }
  .cl-wide .cl-collection-cta .btn { display: block; text-align: center; width: 100%; }
}

/* The slim list row (every page below a collection's root): the list's profile image and name on its stored colors, a link back to the list. A hairline ring
   drawn from the stored text color keeps a white list on the white page from vanishing. The page's own title is the h1 under it. */
.cl-listbar { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; padding: 10px 18px; border-radius: 12px; text-decoration: none;
  background: var(--cl-card-bg, #fff); color: var(--cl-card-ink, #000); border: 1px solid color-mix(in srgb, var(--cl-card-ink, #000) 22%, transparent); }
.cl-listbar:hover { text-decoration: none; filter: brightness(0.97); }
.cl-listbar:focus-visible { outline: 3px solid var(--cl-card-ink, #000); outline-offset: 3px; }
.cl-listbar__icon { width: 40px; height: auto; max-height: 40px; object-fit: contain; flex: none; }
.cl-listbar__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.cl-pagehead { padding-top: 12px; padding-bottom: 8px; border-bottom: 0; }
.cl-pagehead .display { font-size: clamp(30px, 3vw, 46px); margin: 6px 0 4px; overflow-wrap: anywhere; }
.cl-pagehead .lede { margin: 0 0 4px; color: var(--muted); }
.cl-wide .cl-collection-cta.cl-pagehead__cta .btn { background: var(--link, #1553D6); color: #fff; border-color: var(--link, #1553D6); }
.cl-wide .cl-collection-cta.cl-pagehead__cta .cl-collection-cta__more { color: var(--link, #1553D6); }

/* Collector page (CZ-6654): the guide and its picks are the reading column; the facts and links sit in a right rail beside it. The block fills the same
   width as the header above it (no inner cap). Only prose paragraphs keep a readable measure. The rail's modules exist only when they have real data (the page leaves the
   rest out, so the rail never shows a placeholder); with no rail the guide simply takes the width. On a phone the rail follows the guide, and the header's
   "Browse cards" button is the early way into the checklist. */
/* One card language (CZ-6692): the guide's introduction, each of its sections, the noteworthy picks, the rail's modules and the video card are the same rounded
   white card with a 1px border. Cards sit in grids that fill the main column (no capped lede); readable line length is kept INSIDE each card. */
.cl-panel, .cl-module, .video-card, .cl-highlights { background: #fff; border: 1px solid var(--cl-line, #E4DED2); border-radius: 12px; }
.cl-panel { padding: 20px 22px; }
.cl-wide .cl-picks.cl-panel { border-bottom: 1px solid var(--cl-line, #E4DED2); }   /* the section rule drops the last child's bottom border */
.cl-wide .cl-guide.section { display: flex; flex-direction: column; gap: 16px; padding: 0; border: 0; margin-top: 28px; }
.cl-wide .cl-picks.cl-panel { padding: 20px 22px 22px; margin-top: 16px; }
.cl-wide .cl-guide-intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 40px; align-items: start; }
.cl-wide .cl-guide-intro .eyebrow, .cl-wide .cl-guide-intro h2 { grid-column: 1; margin: 0; }
.cl-wide .cl-guide-intro h2 { margin-bottom: 8px; }
.cl-wide .cl-guide-intro .lede { grid-column: 1; margin: 6px 0 0; max-width: none; font-size: 19px; line-height: 1.65; }
@media (min-width: 1100px) {
  /* The title block on the left, the introduction filling the rest of the card on the right. */
  .cl-wide .cl-guide-intro { grid-template-columns: minmax(220px, 3fr) minmax(0, 7fr); grid-template-rows: auto 1fr; }
  .cl-wide .cl-guide-intro .lede { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
.cl-wide .cl-guide-sections { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; margin: 0; }
.cl-wide .cl-guide-sections--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .cl-wide .cl-guide-sections--pair { grid-template-columns: minmax(0, 1fr); } }
.cl-wide .cl-guide-card h3 { font-size: 19px; margin: 0 0 10px; }
.cl-wide .cl-guide-card p { max-width: 68ch; font-size: 16px; line-height: 1.65; }
.cl-wide .cl-guide-links { margin: 0; }
.cl-wide .cl-collection-cta__more { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cl-collector { min-width: 0; }   /* no cap: the wrapper fills the shared shell, the rail sits at its right edge and the main column takes the rest */
.cl-collector__main, .cl-collector__rail { min-width: 0; }
.cl-collector__rail { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.cl-collector--rail { display: flex; flex-direction: column; }
.cl-collector--rail .cl-collector__rail { order: 2; }
@media (min-width: 1000px) {
  .cl-collector--rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .cl-collector--rail .cl-collector__rail { margin-top: 32px; order: 0; }
  .cl-collector--rail > .cl-collector-full { grid-column: 1 / -1; }
}
.cl-module a { color: var(--link, #1553D6); }

/* The guide near the top (CZ-6692): the guide's introduction (three lines) and jump links, in one compact band above the toolbar. */
.cl-highlights { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 14px 20px; margin-top: 12px; }
.cl-highlights__text { flex: 1 1 420px; min-width: 0; max-width: 90ch; }
.cl-highlights .eyebrow { margin: 0 0 4px; }
.cl-highlights__intro { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2, #34444F); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-highlights__jumps { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cl-highlights__jumps a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--link, #1553D6); text-decoration: underline; text-underline-offset: 3px; }
.cl-highlights__jumps a:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; border-radius: 4px; }

/* Browse by Set (CZ-6692): every choice is the same card in the same grid flow (no span, no description); a value with an authored guide only carries a small badge. */
.cl-choice__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cl-choice__badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .02em;
  color: var(--ink-2, #34444F); background: #EEF1F8; border: 1px solid var(--cl-detail-line, #d4d4d4); }

/* Noteworthy cards: the catalog's own picture, drawn whole in a neutral well (never cropped, stretched or enlarged), the stated reason, and its source. */
.cl-picks__intro { max-width: 70ch; color: var(--muted); margin: 0 0 16px; }
.cl-picks__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.cl-pick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--flat-bg, #FBF9F5); border: 1px solid var(--cl-line, #E4DED2); border-radius: 12px; }
.cl-pick__media { display: flex; align-items: center; justify-content: center; height: 250px; padding: 12px; background: #F4F4F1; border-radius: 8px; }
.cl-pick__media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.cl-pick__name { font-size: 17px; line-height: 1.3; margin: 6px 0 0; overflow-wrap: anywhere; }
.cl-pick__name a { color: inherit; }
.cl-pick__link:focus-visible, .cl-pick__media:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; border-radius: 6px; }
.cl-pick:hover { border-color: var(--cl-line-strong, #CFC8BA); }
.cl-pick:hover .cl-pick__link { text-decoration: underline; text-underline-offset: 3px; }
.cl-pick__num { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-pick__price { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink, #1a1a1a); font-variant-numeric: tabular-nums; }
.cl-pick__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.cl-pick__actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; font-size: 14px; text-align: center; }
.cl-pick__why { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2, #34444F); }

/* Rail modules. */
.cl-module { padding: 18px 20px; }
.cl-module__title { font-size: 19px; margin: 0 0 6px; }
.cl-module__lede, .cl-module__note { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cl-module__sub { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.cl-stat { margin: 14px 0 4px; font-size: 16px; color: var(--ink); }
.cl-stat strong { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; margin-right: 4px; }
.cl-counts { list-style: none; margin: 0 0 6px; padding: 0; }
.cl-counts li { border-bottom: 1px solid var(--cl-line, #E4DED2); }
.cl-counts li:last-child { border-bottom: 0; }
.cl-counts__row { display: flex; align-items: center; gap: 12px; padding: 6px 0; min-height: 36px; font-size: 15px; color: inherit; text-decoration: none; }
.cl-counts__label { flex: 1 1 auto; min-width: 0; color: var(--ink-2, #34444F); }
.cl-counts__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-counts__go { flex: none; width: 14px; text-align: center; color: var(--link, #1553D6); font-size: 20px; line-height: 1; }
a.cl-counts__row:hover .cl-counts__label { text-decoration: underline; text-underline-offset: 3px; }
a.cl-counts__row:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; border-radius: 6px; }
.cl-shop, .cl-releases { list-style: none; margin: 0; padding: 0; }
/* Where to buy: a row is one link: a 56 px picture well (contain, never cropped or upscaled), the name and one named action. */
.cl-shop__row { border-bottom: 1px solid var(--cl-line, #E4DED2); }
.cl-shop__row:last-child { border-bottom: 0; }
.cl-shop__item { display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 56px; color: inherit; text-decoration: none; }
.cl-shop__item:hover .cl-shop__name { text-decoration: underline; text-underline-offset: 3px; }
.cl-shop__item:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; border-radius: 6px; }
.cl-shop__thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 6px; background: #F4F4F1; overflow: hidden; }
.cl-shop__thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cl-shop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.35; }
.cl-shop__name { color: var(--ink, #111); font-weight: 600; overflow-wrap: anywhere; }
.cl-shop__action { color: var(--link, #1553D6); font-size: 14px; font-weight: 600; }
.cl-shop__more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--link, #1553D6); }
.cl-shop__more > summary:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; }
.cl-releases li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--cl-line, #E4DED2); font-size: 15px; }
.cl-releases li:last-child { border-bottom: 0; }
.cl-releases__stage { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cl-releases__name { font-weight: 600; }
.cl-releases li p { margin: 0; }
.cl-releases__date { font-variant-numeric: tabular-nums; color: var(--ink-2, #34444F); }

/* Related-video card (CZ-6653, reusable: CZ-6654 puts it in the full sidebar): the episode's own thumbnail, its title and length, one clear action. */
.video-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.video-card__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.video-card__media { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.video-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-card__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(16, 28, 62, .82); color: #fff; }
.video-card__time { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.video-card__title { font-size: 18px; line-height: 1.3; margin: 2px 0 0; }
.video-card__link { color: inherit; }
.video-card__link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }   /* the whole card is the one link */
.video-card__link:focus-visible { outline: none; }
.video-card__link:focus-visible::after { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; }
.video-card:hover { border-color: var(--cl-line-strong, #CFC8BA); box-shadow: 0 4px 16px rgba(16, 28, 62, .10); }
.video-card:hover .video-card__title { text-decoration: underline; text-underline-offset: 3px; }
.video-card__examples { margin: 0; font-size: 14px; color: var(--muted); font-style: italic; }
.video-card__meta { margin: 0; font-size: 14px; color: var(--muted); }
.video-card__cta { font-size: 15px; font-weight: 600; color: var(--link, #1553D6); }

/* Checklist choices (sets, finishes, franchises) and items use the width: as many columns as fit, never narrower than a readable chip/card. */
.cl-wide .cl-choices { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cl-wide .item-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.cl-wide .cl-browse { padding-top: 4px; }
@media (max-width: 560px) {
  .cl-picks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cl-pick { padding: 10px; }
  .cl-pick__media { height: 170px; padding: 8px; }
  .cl-pick__name { font-size: 15px; }
  .cl-pick__why { font-size: 14px; }
  .cl-wide .cl-choices { grid-template-columns: minmax(0, 1fr); }
  .cl-wide .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Item pages (CZ-6686): the SAME fluid flat shell and gutters as the checklist and collection pages (.page--flat, --flat-max, --gutter): no width cap of
   their own. The hero is the image on the left and the details on the right, the listings and the field list use the width as columns, and only the things
   that read badly stretched (the price chart, the metric tiles, the prose notes) keep their own sensible maximum width. */
/* The hero is two groups that size to their content (no framed panel, no stretching to fill): the picture and its thumbnails on the left at a modest natural size,
   and the name, context, price, buttons and the compact Details on the right. */
.cl-item .hero { background: none; border: 0; padding: 0; margin-top: 8px; gap: 40px; align-items: flex-start; }
.cl-item .hero__photo { flex: 0 0 auto; width: min(100%, 380px); max-width: 380px; box-sizing: border-box; padding: 16px; }
.cl-item .hero__photo img { max-height: 460px; }
.cl-item .hero__text { flex: 1 1 420px; padding: 0; gap: 16px; }
.cl-item .item-details { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--cl-detail-line); }
.cl-item .item-details__title { font-size: 18px; margin: 0 0 14px; }
.cl-item .fields--compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 28px; }
.cl-item .fields--compact .field { border: 0; border-radius: 0; background: none; padding: 0; }
.cl-item .fields--compact .field dt { margin: 0; }
.cl-item .fields--compact .field dd { margin: 2px 0 0; }
@media (max-width: 900px) { .cl-item .hero__photo { width: 100%; max-width: none; } }
/* The small pictures under the big one: the photo box stacks (the big picture on top, the row of thumbnails under it, left-aligned with it), each thumbnail a
   fixed square large enough to see, the shown one outlined. Only when there is a row: a lone picture keeps the box as it was. */
.cl-item .hero__photo:has(.gallery) { flex-direction: column; align-items: flex-start; }
.cl-item .gallery { list-style: none; margin: 20px 0 0; padding: 0 4px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.cl-item .gallery li { margin: 0; }
.cl-item .gallery__thumb { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 6px; background: #fff; border: 2px solid transparent; border-radius: 8px; box-sizing: border-box; }
.cl-item .gallery__thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.cl-item .gallery__thumb:hover { border-color: #c9c9c2; }
.cl-item .gallery__thumb[aria-current] { border-color: var(--cl-detail-ink, #1a1a1a); }
.cl-item .gallery__thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cl-item .fields { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cl-item .field dd { overflow-wrap: anywhere; }
.cl-item .listing-grid { display: flex; flex-wrap: wrap; }
.cl-item .listing-grid > li { flex: 1 1 230px; max-width: 340px; }
/* Compact metric tiles on the item page: five or six of them (highest, lowest, lowest listed, listed now, sold) sit in one row instead of wrapping to a second. */
.cl-item .metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); gap: 12px; }
.cl-item .metric { gap: 12px; padding: 10px 14px; }
.cl-item .metric__icon { flex-basis: 34px; width: 34px; height: 34px; }
.cl-item .metric__icon svg { width: 22px; height: 22px; }
.cl-item .metric__value { font-size: 22px; }
.cl-item .metric__label { font-size: 13px; line-height: 1.25; }
.cl-item .chart { max-width: 960px; }
.cl-item .section > p, .cl-item .shop-note { max-width: 75ch; }
@media (max-width: 560px) { .cl-item .listing-grid > li { flex-basis: calc(50% - 8px); max-width: none; } }

/* CZ-6686: a listing row shows the seller and feedback exactly as the app's eBay listing row does (IsoNeedsItemDetailSheet.xaml): the username in bold, then
   the feedback score and percentage in normal weight. Never a condition. */
.listing__seller { font-size: 13px; line-height: 1.35; color: var(--muted); padding: 4px 14px 0; overflow-wrap: anywhere; }
.listing__seller b { font-weight: 700; color: var(--ink); }
.listing__feedback { font-weight: 400; }

/* CZ-6668: the items-first page. The filter toolbar (a labelled select per filter, one Apply), the count, the pager and the count on a "Browse by" link. */
.cl-filters > h2 { font-size: 18px; margin: 0 0 12px; }
.cl-filterform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; }
.cl-filterfield { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; max-width: 360px; }
.cl-filterfield label { font-weight: 600; font-size: 14px; }
.cl-filterfield select { width: 100%; max-width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--cl-detail-line, #d4d4d4); border-radius: 6px; background: #fff; color: var(--ink, #111); font: inherit; }
.cl-filterfield select:focus-visible, .cl-filterform button:focus-visible, .cl-filterform__link:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; }
.cl-filterfield__note { color: var(--muted, #555); font-size: 13px; }
.cl-filterform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 44px; }
.cl-filterform__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--link, #1553D6); text-decoration: underline; text-underline-offset: 3px; }
.cl-filternote { margin: 12px 0 0; color: var(--muted, #555); font-size: 14px; }
.cl-count { margin: 0 0 14px; font-weight: 600; }
/* CZ-6695: the facet the page is narrowed by, as a removable chip above the toolbar (the remove link is the whole page without it). */
.cl-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 6px; }
.cl-facet { display: inline-flex; align-items: center; gap: 2px; background: var(--tile, #F6F3EE); border: 1.5px solid var(--outline, #B9AE9F); border-radius: 999px; padding: 2px 4px 2px 14px; font-weight: 600; font-size: 15px; color: var(--ink, #14202B); }
.cl-facet__text { overflow-wrap: anywhere; }
.cl-facet__remove { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px -2px -8px 0; border-radius: 999px; color: var(--link, #1553D6); font-size: 22px; line-height: 1; text-decoration: none; }
.cl-facet__remove:hover { background: rgba(0, 0, 0, 0.06); }
.cl-facet__remove:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; }
.cl-itempager { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.cl-itempager .load-more { margin: 0; }
.cl-choice__count { font-weight: 400; color: var(--muted, #555); }
@media (max-width: 640px) {
  .cl-filterfield { flex-basis: 100%; max-width: none; }
  .cl-filterform__actions .btn { flex: 1 1 auto; }
}

/* A guide section's showcase (one card for each of a game's inks): the six pictures in one row under the section's text, each labelled and linking to the checklist
   for that value. On a wide screen the section's card spans two columns of the guide's grid (with dense flow, so its neighbors fill the row beside and below it and
   no column is left uneven); on a narrower one it is an ordinary card and the pictures wrap inside it. */
.cl-showcase { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.cl-showcase li { margin: 0; min-width: 0; }
.cl-showcase a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.cl-showcase:has(li:only-child) { grid-template-columns: minmax(0, 150px); }
.cl-showcase img { width: 100%; max-width: 124px; height: auto; border-radius: 6px; background: #f4f4f1; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.cl-showcase span { font-weight: 600; font-size: 14px; }
.cl-showcase a:hover span { text-decoration: underline; }
.cl-showcase a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.cl-wide .cl-guide-sections { grid-auto-flow: row dense; container-type: inline-size; }
/* Judged on the width of the guide's own grid (not the window, which has a rail beside it at some sizes): once it is wide enough for two columns the section's
   card spans both and the six pictures sit in one row; below that it is an ordinary one-column card. */
@container (min-width: 700px) {
  .cl-guide-card--showcase { grid-column: span 2; }
  .cl-wide .cl-guide-card--showcase p { max-width: none; }
  .cl-guide-card--showcase .cl-showcase { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Related news (CZ-6700): the cards are the shared _StoryCard, styled in stories.css; only the compact item-page spacing lives here. */
.cl-item .cl-stories--compact { margin-top: 8px; border: 0; padding-block: 0; }
.cl-item .cl-stories--compact > h2 { font-size: 18px; margin-bottom: 10px; }

/* CZ-6688: the Sold figure is a link that opens the item's sold listings in a side panel (a bottom sheet on a phone; the plain page without scripting). */
.metric--link { color: inherit; text-decoration: none; cursor: pointer; }
.metric--link:hover { border-color: var(--link); text-decoration: none; }
.metric--link:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.sold-open { overflow: hidden; }
.sold-overlay { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.45); opacity: 0; transition: opacity .2s ease; z-index: 90; }
.sold-overlay.is-open { opacity: 1; }
.sold-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--panel, #fff); border-left: 1px solid var(--cl-line, #E4DED2);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .22s ease; z-index: 100; outline: none; }
.sold-panel.is-open { transform: none; }
.sold-panel__close { position: sticky; top: 8px; float: right; margin: 8px 10px 0 0; width: 40px; height: 40px; border: 1px solid var(--cl-line, #E4DED2); border-radius: 50%;
  background: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 1; }
.sold-panel__body { padding: 20px 20px 28px; }
.sold__head h2 { margin: 0 44px 2px 0; font-size: 24px; }
.sold__head p { margin: 2px 0; }
.sold__sub { font-weight: 600; color: var(--muted); }
.sold-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.sold-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--cl-line, #E4DED2); border-radius: 10px; background: #fff; }
.sold-row__media { display: block; width: 72px; height: 72px; background: #f4f4f1; border-radius: 6px; overflow: hidden; }
.sold-row__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sold-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sold-row__title { font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.sold-row__title:hover { text-decoration: underline; }
.sold-row__meta { font-size: 13px; color: var(--muted); }
.sold-row__meta b { color: var(--ink); font-weight: 700; }
.sold-row__price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 700; color: var(--link); white-space: nowrap; }
.sold__more { margin: 14px 0 0; text-align: center; }
.sold-page { max-width: 760px; }
@media (max-width: 640px) {
  .sold-panel { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--cl-line, #E4DED2); border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18); transform: translateY(100%); }
  .sold-panel.is-open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sold-panel, .sold-overlay { transition: none; } }
/* Keyword search on a checklist page (CZ-6704): a compact bar above the filters; the box and the button share a row, the note says what is searched. */
.cl-search { margin: 18px 0 0; }
.cl-filters .cl-search { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cl-line, #E4DED2); }
.cl-searchform__label { flex: 0 0 100%; font-size: 14px; font-weight: 600; color: var(--muted); }
.cl-searchform { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cl-searchform__input { flex: 1 1 280px; min-width: 0; max-width: 520px; min-height: 44px; padding: 8px 14px; font: inherit; border: 1px solid var(--cl-line-strong, #CFC8BA); border-radius: 8px; background: #fff; }
.cl-searchform__input:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; }
.cl-searchform .btn { min-height: 44px; }
.cl-searchnote { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.cl-searchnote--warn { color: var(--accent, #B3122B); }

/* The six inks as ONE compact box with a manual carousel (Kyle, 2026-10-23): one real card, its name and one line at a time. The slides scroll natively
   (scroll-snap) so it works with no script; carousel.js adds the arrows and the current-dot state. */
.cl-carousel { position: relative; margin-top: 14px; }
.cl-carousel__track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; border-radius: 10px; }
.cl-carousel.is-enhanced .cl-carousel__track { scrollbar-width: none; }
.cl-carousel.is-enhanced .cl-carousel__track::-webkit-scrollbar { display: none; }
.cl-carousel__track:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; }
.cl-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 52px 2px; text-align: center; box-sizing: border-box; }
.cl-carousel__card { display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.cl-carousel__card img { height: 230px; width: auto; max-width: 100%; object-fit: contain; border-radius: 8px; background: #f4f4f1; box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
.cl-carousel__card strong { font-size: 17px; }
/* CZ-6770: a carousel in a half-width card keeps the picture its natural size by taking less side padding for the arrows */
.cl-guide-card:not(.cl-guide-card--wide) .cl-carousel__slide { padding-left: 36px; padding-right: 36px; }
.cl-carousel__nopicture { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 230px; width: 165px; max-width: 100%; padding: 12px; border: 1px dashed var(--cl-line, #E4DED2); border-radius: 8px; background: #f4f4f1; color: var(--muted); font-size: 14px; line-height: 1.35; text-align: center; }
.cl-carousel__card:hover strong { text-decoration: underline; }
.cl-carousel__card:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; border-radius: 8px; }
.cl-carousel__blurb { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5; }
.cl-carousel__btn { position: absolute; top: 96px; width: 40px; height: 40px; border: 1px solid var(--cl-line, #E4DED2); border-radius: 50%; background: #fff; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.cl-carousel__btn:hover:not([aria-disabled="true"]) { border-color: var(--link, #1553D6); }
.cl-carousel__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.cl-carousel__btn:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 2px; }
.cl-carousel__prev { left: 4px; }
.cl-carousel__next { right: 4px; }
.cl-carousel__dots { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: center; gap: 2px; }
.cl-carousel__dots a { display: block; width: 26px; height: 26px; position: relative; }
.cl-carousel__dots a::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--cl-line, #cfc8ba); border: 1px solid #a89f8e; box-sizing: border-box; }
.cl-carousel__dots a[aria-current="true"]::before { background: var(--link, #1553D6); border-color: var(--link, #1553D6); }
.cl-carousel:not(.is-enhanced) .cl-carousel__dots li:first-child a::before { background: var(--link, #1553D6); border-color: var(--link, #1553D6); }
.cl-carousel__dots a:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 1px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .cl-carousel__track { scroll-behavior: auto; } }

/* Item page with a story (Kyle, CZ-6716): photo | price, buying and details | the story in a right column. The story column is only there when there is a story.
   Under 1200px the story sits under the details; under 900px everything stacks. */
.cl-item .hero--aside { display: grid; grid-template-columns: 380px minmax(0, 1fr) minmax(300px, 360px); gap: 40px; align-items: start; }
.cl-item .hero--aside .hero__photo { width: auto; max-width: none; }
.cl-item .hero--aside.hero--nophoto { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.cl-item .hero--aside .hero__text { min-width: 0; }
.cl-item .hero__aside { min-width: 0; }
.cl-item .hero__aside .cl-stories--compact { margin-top: 0; }
@media (max-width: 1200px) {
  .cl-item .hero--aside { grid-template-columns: 380px minmax(0, 1fr); }
  .cl-item .hero--aside.hero--nophoto { grid-template-columns: minmax(0, 1fr); }
  .cl-item .hero--aside .hero__aside { grid-column: 2; }
  .cl-item .hero--aside.hero--nophoto .hero__aside { grid-column: 1; }
}
@media (max-width: 900px) {
  .cl-item .hero--aside { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cl-item .hero--aside .hero__aside, .cl-item .hero--aside.hero--nophoto .hero__aside { grid-column: 1; }
}

/* Teaching examples inside a guide section (CZ-6719): real cards, whole, each linked by its stored name, with the authored line beneath. Three compare side by side; one sits beside its
   words. The picture is the catalog's own (never cropped, never redrawn). */
.cl-examples { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; align-items: start; }
.cl-examples--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cl-examples--2 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* CZ-6770: a narrow card with two examples keeps them side by side at any width (smaller pictures), instead of stacking them in a half-width cell */
.cl-guide-card:not(.cl-guide-card--wide) .cl-examples--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* CZ-6786: an example that shows a catalog thumbnail is drawn at its natural size, never enlarged; a bigger picture means the full-size image, not a stretched thumbnail */
.cl-guide-card .cl-examples:not(.cl-examples--products) .cl-example__card.cl-example__card--thumb img { width: auto; max-width: 100%; height: auto; }
.cl-examples--1 { grid-template-columns: minmax(0, 1fr); }
.cl-example { margin: 0; min-width: 0; }
.cl-example__card { display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.cl-example__card img { width: 100%; max-width: 220px; height: auto; border-radius: 8px; background: #f4f4f1; box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
.cl-example__card strong { font-size: 15.5px; line-height: 1.25; text-align: center; }
.cl-example__card:hover strong { text-decoration: underline; }
.cl-example__card:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; border-radius: 8px; }
.cl-guide-sections .cl-example__caption { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; text-align: center; max-width: 34ch; margin-inline: auto; }
.cl-examples--1 .cl-example { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.cl-examples--1 .cl-example__card img { max-width: 230px; }
.cl-guide-sections .cl-examples--1 .cl-example__caption { text-align: left; margin: 0; max-width: 30ch; align-self: center; }
.cl-examples--1 .cl-example__card strong { text-align: left; }

/* Three linked set cards: one whole-card link each (name, one line), three across where there is room. */
.cl-setcards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cl-setcard { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 38px 16px 16px; border: 1px solid var(--cl-line, #E4DED2); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; box-sizing: border-box; }
.cl-setcard:hover { border-color: var(--link, #1553D6); }
.cl-setcard:hover .cl-setcard__name { text-decoration: underline; text-underline-offset: 3px; }
.cl-setcard:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; }
.cl-setcard__name { font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--navy, #13203f); }
.cl-setcard__caption { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.cl-setcard__go { position: absolute; right: 14px; top: 16px; color: var(--link, #1553D6); font-weight: 700; }

/* CZ-6728: labelled examples (Epic / Enchanted / Iconic), titled item lists (product choices, collecting goals), closing notes and the learn-to-play box. */
.cl-examples--labeled { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.cl-example__label { margin: 0 0 8px; font-size: 17px; text-align: center; }
.cl-guide-sections .cl-examples--labeled .cl-example__caption { text-align: left; max-width: none; margin-inline: 0; }
.cl-parts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px 32px; grid-template-columns: minmax(0, 1fr); }
.cl-parts li { margin: 0; min-width: 0; }
.cl-parts h4 { font-size: 16px; margin: 0 0 4px; }
.cl-guide-sections .cl-parts p { max-width: 60ch; font-size: 15.5px; line-height: 1.55; }
.cl-guide-notes { margin-top: 16px; }
.cl-guide-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cl-line, #E4DED2); }
.cl-guide-note h4 { font-size: 16px; margin: 0 0 4px; }
.cl-guide-sections .cl-guide-note p { max-width: 70ch; }
.cl-module--resource p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.cl-resource__links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.cl-resource__links a { display: inline-block; padding: 8px 0; min-height: 24px; font-weight: 600; }
.cl-callout { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--cl-line, #E4DED2); border-radius: 10px; background: #f4f4f1; }
.cl-callout h4 { margin: 0 0 4px; font-size: 17px; }
.cl-guide-sections .cl-callout p { margin: 0 0 12px; max-width: 70ch; font-size: 15.5px; line-height: 1.5; }
/* Titled paragraph lists (product choices, collecting steps): one column on a phone, two balanced columns where the card is wide enough, and an odd last item spans the row. */
@container (min-width: 600px) {
  .cl-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-parts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cl-guide-sections .cl-parts li:last-child:nth-child(odd) p { max-width: none; }
}
.cl-setcards__heading { margin: 20px 0 0; font-size: 16px; }
.cl-setcards__heading + .cl-setcards { margin-top: 10px; }

/* CZ-6731: the lower guide is visual and uses the full width below the right rail. */
.cl-collector-full { min-width: 0; }
.cl-guide--full { margin-top: 0; }
.cl-wide .cl-guide-sections--full { grid-template-columns: minmax(0, 1fr); }

/* product picture cards: real packshots at one height, four across, two across on a phone */
.cl-examples--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.cl-examples--products .cl-example__card img { width: auto; height: 190px; max-width: 100%; object-fit: contain; background: none; box-shadow: none; border-radius: 0; }
.cl-examples--products .cl-example__card strong { font-size: 14px; font-weight: 500; color: var(--muted); }
.cl-guide-sections .cl-examples--products .cl-example__caption { text-align: center; max-width: none; font-size: 14.5px; }
@container (min-width: 760px) {
  .cl-examples--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-examples--products .cl-example__card img { height: 210px; }
}

/* the Stitch block: the words on the left, the three cards on the right (stacked on a phone) */
@container (min-width: 760px) {
  .cl-guide-card--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 36px; align-items: start; }
  .cl-guide-card--split > h3 { grid-column: 1 / -1; }
  .cl-guide-card--split > p, .cl-guide-card--split > .cl-guide-notes, .cl-guide-card--split > .cl-callout { grid-column: 1; }
  .cl-guide-card--split > .cl-examples { grid-column: 2; grid-row: 2 / span 5; margin-top: 0; }
}
/* the three Stitch cards stay a compact row on a phone (names and sets small), and grow back beside the words */
.cl-guide-card--split .cl-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cl-guide-card--split .cl-example__card strong { font-size: 12.5px; line-height: 1.25; }
.cl-guide-sections .cl-guide-card--split .cl-example__caption { font-size: 12px; line-height: 1.3; margin-top: 2px; }
@container (min-width: 760px) {
  .cl-guide-card--split .cl-examples { gap: 14px; }
  .cl-guide-card--split .cl-example__card strong { font-size: 15px; }
  .cl-guide-sections .cl-guide-card--split .cl-example__caption { font-size: 14px; }
}
.cl-callout--cta { padding: 0; border: 0; background: none; margin-top: 18px; }
.cl-callout--cta .btn { margin: 0; }

/* CZ-6732: purposeful columns instead of one-sided prose caps. Two intro paragraphs and two notes sit side by side in a wide card; the rarity card is two whole columns with
   the count breakdown starting at the heading's own top edge. A phone (card under 700px) keeps everything stacked in reading order. */
.cl-guide-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
.cl-guide-sections .cl-guide-text p { margin: 0; }
.cl-guide-sections .cl-guide-card--wide > p { max-width: 100ch; }
@container (min-width: 700px) {
  .cl-guide-sections .cl-guide-card--wide:not(.cl-guide-card--split) .cl-guide-text { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
  .cl-guide-sections .cl-guide-card--wide:not(.cl-guide-card--split) .cl-guide-text p { max-width: none; }
  .cl-guide-sections .cl-guide-card--wide:not(.cl-guide-card--split) .cl-guide-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cl-line, #E4DED2); }
  .cl-guide-sections .cl-guide-card--wide:not(.cl-guide-card--split) .cl-guide-note { margin: 0; padding: 0; border-top: 0; }
  .cl-guide-sections .cl-guide-card--wide:not(.cl-guide-card--split) .cl-guide-note p { max-width: none; }
  .cl-guide-sections .cl-guide-card--wide:not(.cl-guide-card--split) .cl-guide-note:only-child { grid-column: 1 / -1; }
  .cl-guide-sections .cl-guide-card--wide:not(.cl-guide-card--split) .cl-guide-note:only-child p { max-width: 100ch; }

}


/* CZ-6730: fandom tiles and matching-design pairs (the Loungefly guide). Tiles are whole-card links; pairs show a backpack and its matching piece side by side. */
.cl-tiles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-tiles li { margin: 0; min-width: 0; }
.cl-tile { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--cl-line, #E4DED2); border-radius: 12px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; }
.cl-tile img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f4f4f1; }
.cl-tile strong { padding: 10px 12px 12px; font-family: var(--font-display); font-size: 17px; line-height: 1.2; color: var(--navy, #13203f); }
.cl-tile__caption { padding: 0 12px 12px; margin-top: -6px; font-size: 14px; line-height: 1.4; color: var(--muted, #4b5563); }
.cl-tile:hover { border-color: var(--link, #1553D6); }
.cl-tile:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cl-tile:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; }
@container (min-width: 700px) {
  .cl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
/* CZ-6751: a full-width section with exactly three tiles fills its row with three columns, not three of four (the lead card keeps its own rule). */
@container (min-width: 700px) { .cl-guide-card:not(.cl-guide-lead) .cl-tiles:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* CZ-6730: the "top values" module beside the guide introduction (compact; stacked under it on a phone). */
.cl-guide-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.cl-top { padding: 16px 18px; align-self: start; }
.cl-top h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--navy, #13203f); }
.cl-top__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cl-top__list a { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cl-line, #E4DED2); color: inherit; text-decoration: none; }
.cl-top__list a:hover .cl-top__name { text-decoration: underline; }
.cl-top__name { font-size: 15px; line-height: 1.3; }
.cl-top__count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; white-space: nowrap; }
.cl-top__all { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--link, #1553D6); text-decoration: none; }
.cl-top__all:hover { text-decoration: underline; }
.cl-top a:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; border-radius: 4px; }
@container (min-width: 760px) {
  .cl-guide-top--with-module { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
/* The introduction inside the left column is always one column (its own width is the column's, not the page's): these rules are not inside a container query, because the nearest
   container of the introduction is the left column itself (CZ-6742). */
.cl-wide .cl-guide-top--with-module .cl-guide-intro { grid-template-columns: minmax(0, 1fr); }
.cl-wide .cl-guide-top--with-module .cl-guide-intro .lede { grid-column: 1; grid-row: auto; margin: 6px 0 0; }



/* CZ-6740: the rail's most-expensive-cards module: a small picture beside the name, number, price and one TCGplayer action. */
.cl-priced__list { list-style: none; margin: 8px 0 0; padding: 0; }
.cl-priced__row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--cl-line, #E4DED2); }
.cl-priced__row:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-priced__media { flex: none; display: block; width: 76px; text-decoration: none; }
.cl-priced__media img { display: block; width: 76px; height: auto; border-radius: 4px; background: #F4F4F1; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.cl-priced__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.35; }
.cl-priced__name { color: var(--ink, #111); font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.cl-priced__name:hover, .cl-priced__tcg:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-priced__meta { color: var(--muted); font-size: 14px; }
.cl-priced__price { font-weight: 700; color: var(--ink, #111); }
.cl-priced__tcg { font-size: 14px; font-weight: 600; margin-top: 2px; text-decoration: none; }
.cl-priced a:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; border-radius: 4px; }

/* CZ-6742: the introduction and the picture tiles stack in one left column beside the "top values" module; the tiles sit four across in that column. */
.cl-guide-top__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; container: leadcol / inline-size; }
.cl-guide-lead h3 { margin: 0 0 6px; }
.cl-guide-lead > p { margin: 0 0 4px; }
.cl-guide-lead .cl-tiles { margin-top: 12px; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-guide-lead .cl-tile img { aspect-ratio: auto; height: 130px; object-fit: contain; }
.cl-guide-lead .cl-tile strong { padding: 8px 10px 10px; font-size: 15px; }
@container leadcol (min-width: 600px) {
  .cl-guide-lead .cl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .cl-guide-lead .cl-tile img { height: 170px; }
}
@media (max-width: 600px) {
  .cl-top__list a { padding: 5px 0; }
}

/* CZ-6742: the right column of the guide top (featured items above the top values) and the bag-shaped picture of the featured rows. */
.cl-guide-top__rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; align-self: start; }
.cl-priced--bags .cl-priced__media { width: 64px; }
.cl-priced--bags .cl-priced__media img { width: 64px; height: 64px; object-fit: contain; }
.cl-priced--bags .cl-priced__row { align-items: center; padding: 8px 0; }

/* CZ-6742: matching-design groups: one card per design, its pieces side by side with a caption each. */
.cl-groups { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.cl-group { margin: 0; min-width: 0; padding: 14px; border: 1px solid var(--cl-line, #E4DED2); border-radius: 12px; background: #fff; }
.cl-group__title { margin: 0 0 10px; font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--navy, #13203f); }
.cl-group__pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-group__piece { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cl-group__piece img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f4f4f1; border-radius: 8px; }
.cl-group__label { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--link, #1553D6); text-decoration: none; }
.cl-group__label:hover { text-decoration: underline; }
.cl-group a:focus-visible { outline: 3px solid var(--link, #1553D6); outline-offset: 3px; border-radius: 6px; }
@container (min-width: 700px) {
  .cl-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-group__pieces { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}

/* CZ-6745: the first full-width row is three columns on a wide screen: six inks, two inks, count breakdown; later the special cards (two columns) beside the priced cards. A phone stacks them
   in reading order; in between the narrow cards share two columns and the counts and priced cards take the row. */
.cl-wide .cl-guide-sections--tri { grid-template-columns: minmax(0, 1fr); }
.cl-counts-card { align-self: start; min-width: 0; }
.cl-counts-card .cl-module { border: 0; background: none; padding: 0; box-shadow: none; }
.cl-counts-card .cl-module__title { margin-top: 0; font-size: 19px; line-height: 1.3; }
@media (min-width: 640px) {
  .cl-wide .cl-guide-sections--tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-guide-sections--tri .cl-guide-card:not(.cl-guide-card--wide) { grid-column: auto; }
  .cl-guide-sections--tri .cl-counts-card, .cl-guide-sections--tri > .cl-priced, .cl-guide-sections--tri .cl-guide-card--wide { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .cl-wide .cl-guide-sections--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-guide-sections--tri .cl-counts-card, .cl-guide-sections--tri > .cl-priced { grid-column: auto; align-self: start; }
  .cl-guide-sections--tri .cl-guide-card--beside-priced { grid-column: span 2; }
}
.cl-guide-sections--tri > .cl-priced { margin: 0; }

/* CZ-6770: the learn-to-play box is a card of the last full-width row, beside the card that hosts it (two thirds and one third on a wide screen, stacked below that) */
@media (min-width: 1000px) {
  .cl-wide .cl-guide-sections--res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-guide-sections--res .cl-guide-card--wide { grid-column: 1 / -1; }
  .cl-guide-sections--res .cl-guide-card--beside-resource { grid-column: span 2; }
  .cl-guide-sections--res > .cl-module--resource { grid-column: auto; align-self: start; }
}
.cl-guide-sections--res > .cl-module--resource { margin: 0; padding: 20px 22px; }
.cl-guide-sections--res > .cl-module--resource .cl-module__title { margin-top: 0; font-size: 19px; line-height: 1.3; }

/* with no live counts there is no ink row to complete: the two ink cards still share a row */
@media (min-width: 761px) {
  .cl-wide .cl-guide-sections--full.cl-guide-sections--pair:not(.cl-guide-sections--tri):not(.cl-guide-sections--res) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-guide-sections--full.cl-guide-sections--pair:not(.cl-guide-sections--tri):not(.cl-guide-sections--res) .cl-guide-card--wide { grid-column: 1 / -1; }
}
/* CZ-6770: in the two-column pair grid beside a right rail the cell can be narrower than the 700px container query, so a wide card must span the grid on its own */
@media (min-width: 761px) {
  .cl-wide .cl-guide-sections--pair > .cl-guide-card--wide { grid-column: 1 / -1; }
}

/* a wide card takes the whole row of its guide grid (it was part of the removed paired-section block) */
@container (min-width: 700px) {
  .cl-guide-card--wide { grid-column: 1 / -1; }
}

/* Layout "columns" (the rarity card): the heading across the top, then the introduction and the explanations flow in two balanced text columns where the card is wide; each heading stays with its paragraph */
.cl-guide-card--columns h3 { column-span: all; }
@container (min-width: 700px) {
  .cl-guide-card--columns { column-count: 2; column-gap: 48px; }
  .cl-guide-card--columns h3 { column-span: all; }
  .cl-guide-card--columns > p, .cl-guide-card--columns .cl-parts li { break-inside: avoid; }
  .cl-guide-card--columns .cl-parts { display: block; margin: 0; }
  .cl-guide-card--columns .cl-parts li { margin: 0 0 16px; }
  .cl-guide-card--columns > p { margin: 0 0 16px; }
  .cl-guide-sections .cl-guide-card--columns p { max-width: none; }
}
.cl-priced--bags .cl-priced__intro { margin: 0 0 8px; font-size: .9rem; color: var(--muted, #555); }
.cl-wide .cl-guide-card p.cl-guide-sourcelinks { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted, #555); overflow-wrap: anywhere; }
.cl-wide .cl-guide-card p.cl-tiles-all, .cl-wide .cl-guide-lead > p.cl-tiles-all { margin: 12px 0 0; font-weight: 600; }
.cl-priced--bags .cl-priced__note { align-self: flex-start; margin-top: 3px; padding: 1px 8px; border: 1px solid var(--cl-line, #E4DED2); border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--muted, #555); white-space: nowrap; }
/* CZ-6756: three product cards fill the row at three across (not four with a gap); one card beside its words is not shrunk to a third of the column */
@container (min-width: 760px) {
  .cl-examples--products.cl-examples--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cl-guide-card--split .cl-examples--n1 { grid-template-columns: minmax(0, 1fr); }
.cl-guide-card--split .cl-examples--n1 .cl-example__card img { max-width: 320px; }
.cl-guide-card--split .cl-examples--n1 .cl-example { display: block; }
.cl-guide-sections .cl-guide-card--split .cl-examples--n1 .cl-example__caption { font-size: 14.5px; line-height: 1.45; text-align: left; max-width: none; margin-top: 8px; }
.cl-guide-card--split .cl-examples--n1 .cl-example__card strong { font-size: 15px; text-align: left; }
.cl-priced--bags .cl-priced__obs, .cl-priced--bags .cl-priced__cond { display: block; font-size: .82rem; line-height: 1.35; color: var(--muted, #555); }
.cl-priced--bags .cl-priced__listing { display: inline-block; margin-top: 3px; font-size: .85rem; font-weight: 600; }
/* CZ-6756: every module of the right rail is as wide as the rail (the Top values card was shrunk to its content) */
.cl-guide-top__rail > .cl-top { align-self: stretch; }
.cl-top .cl-top__note { margin: -2px 0 8px; font-size: .8rem; line-height: 1.4; color: var(--muted, #555); }
.cl-priced--bags .cl-priced__qual { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.35; font-style: italic; color: var(--muted, #555); }
/* CZ-6756: a hosted count breakdown that lists several fields (no standard/special reading) spans the row and sets its fields side by side */
.cl-guide-sections:not(.cl-guide-sections--tri) > .cl-counts-card:has(.cl-counts-fields) { grid-column: 1 / -1; }
.cl-counts-card .cl-counts-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 32px; }
/* CZ-6756: a split card with four or more notes keeps its words and picture side by side on top and lays the notes across the whole card in balanced columns beneath (three across on a wide card, two on a narrower one, one on a phone), so a tall text column never leaves an empty column beside one picture */
@container (min-width: 760px) {
  .cl-guide-card--split:has(> .cl-guide-notes > .cl-guide-note:nth-child(4)) > .cl-examples { grid-row: 2; }
  .cl-guide-card--split:has(> .cl-guide-notes > .cl-guide-note:nth-child(4)) > p { align-self: center; }
  .cl-guide-sections .cl-guide-card--split:has(> .cl-guide-notes > .cl-guide-note:nth-child(4)) > .cl-guide-notes { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cl-line, #E4DED2); }
  .cl-guide-sections .cl-guide-card--split:has(> .cl-guide-notes > .cl-guide-note:nth-child(4)) > .cl-guide-notes .cl-guide-note { margin: 0; padding: 0; border-top: 0; }
  .cl-guide-sections .cl-guide-card--split:has(> .cl-guide-notes > .cl-guide-note:nth-child(4)) > .cl-guide-notes .cl-guide-note p { max-width: none; }
}
@container (min-width: 1000px) {
  .cl-guide-sections .cl-guide-card--split:has(> .cl-guide-notes > .cl-guide-note:nth-child(4)) > .cl-guide-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Editorial card in a guide's right rail: small photo beside the headline and byline, teaser under it; one column on a phone like every rail module. */
.cl-editorial__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cl-editorial__body { display: flex; gap: 14px; align-items: flex-start; }
.cl-editorial__photo { flex: 0 0 88px; }
.cl-editorial__photo img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 10px; }
.cl-editorial__text { min-width: 0; }
.cl-editorial__title { font-size: 19px; line-height: 1.25; margin: 0; }
.cl-editorial__title a { color: inherit; text-decoration: none; }
.cl-editorial__title a:hover { text-decoration: underline; }
.cl-editorial__byline { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.cl-editorial__teaser { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.cl-editorial__more { display: inline-block; margin-top: 8px; padding: 8px 0; min-height: 24px; font-weight: 600; }

/* CZ-6753: a set card can lead with a real card from its set. */
.cl-setcard--image { padding-top: 12px; }
.cl-setcard__art { display: block; width: 100%; max-width: 190px; height: auto; align-self: center; border-radius: 6%; margin-bottom: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }