/* FishSnap Store — commerce revision (2026-09-28).
   One calm shopping page: a single search, equal category tiles, restrained section heads,
   one product-card component, one chip style, one select style, one text-link style and one
   "Show more" button. Scoped to fs-* classes and the Store page; h1/h2 sizes come from the
   shared typography.css scale (loaded after this file), so no page-specific title sizes here. */

body[data-merch-page] { background: var(--bg); }

/* ---- Shared Marketplace / Store switch, in the same place on both pages ---- */
.fs-store-switch { border-bottom: 1px solid var(--line); background: var(--surface); }
.fs-store-switch .subnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 410px); padding: 10px 0; overflow: visible; }
.fs-store-switch .subnav a { display: flex; width: 100%; min-width: 0; min-height: 40px; align-items: center; justify-content: center; padding: 7px 10px; font-size: .75rem; line-height: 1.2; white-space: normal; }
.fs-marketplace-page .fs2-example-strip { position: static; }
@media (max-width: 559px) {
  .fs-store-switch .subnav { width: 100%; }
}

/* ---- Hero: title, one search, category tiles ---- */
.fs-hero { padding: 28px 0 56px; }
.fs-hero.is-searching { padding-bottom: 20px; }
.fs-hero .crumbs { margin-bottom: 18px; }
.fs-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 28px; }
.fs-hero-intro { min-width: 0; }
.fs-hero h1 { margin: 0 0 12px; }
.fs-hero-sub { max-width: 60ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.fs-hero.is-searching .fs-ad { display: none; }

/* Compact brand carousel beside the Store introduction. */
.fs-ad { min-width: 0; overflow: hidden; border: 1px solid #cbdcda; border-radius: 16px; background: #f2f7f6; }
.fs-ad-slides { height: 164px; }
.fs-ad-slide { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; width: 100%; height: 100%; gap: 2px; padding: 12px 12px 8px 18px; color: #0b2027; text-decoration: none; }
.fs-ad-slide[hidden] { display: none; }
.fs-ad-slide:nth-child(2) { background: #f5f0f8; }
.fs-ad-slide:nth-child(3) { background: #eef7f2; }
.fs-ad-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; }
.fs-ad-copy small { color: #37666b; font: 700 .58rem/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.fs-ad-copy strong { color: #0b2027; font: 700 1.22rem/1.15 "Avenir Next", Avenir, Inter, sans-serif; }
.fs-ad-copy > span { color: #415b5f; font-size: .77rem; line-height: 1.35; }
.fs-ad-copy em { margin-top: 6px; color: #075e68; font-size: .76rem; font-style: normal; font-weight: 700; }
.fs-ad-slide img { width: 100%; height: 140px; object-fit: contain; }
.fs-ad-controls { display: flex; height: 38px; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 10px; border-top: 1px solid #dbe7e5; background: #fff; }
.fs-ad-controls > span { margin-right: auto; color: #60767a; font: 600 .67rem/1 "JetBrains Mono", monospace; }
.fs-ad-controls button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #cedfdd; border-radius: 50%; background: #fff; color: #0b2027; cursor: pointer; }
.fs-ad-controls button:hover { border-color: #6f9c9c; }
.fs-ad-controls button:focus-visible, .fs-ad-slide:focus-visible { outline: 3px solid rgba(23,107,114,.4); outline-offset: 2px; }

.fs-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 780px; margin-top: 24px; padding: 5px; border: 1px solid #c3d4d1; border-radius: 999px; background: var(--surface); box-shadow: 0 10px 28px rgba(11, 32, 39, .06); transition: border-color .18s ease, box-shadow .18s ease; }
.fs-search:focus-within { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(23, 107, 114, .14), 0 10px 28px rgba(11, 32, 39, .06); }
.fs-search-icon { position: absolute; left: 19px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.fs-search input { flex: 1; min-width: 0; height: 48px; padding: 0 10px 0 44px; border: 0; background: transparent; color: var(--ink); font-size: 1rem; outline: none; }
.fs-search input::placeholder { color: #7e9095; }
.fs-search .btn { flex: 0 0 auto; min-height: 48px; padding: 0 24px; font-size: .9rem; }

.fs-search-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 14px 0 0 6px; color: var(--ink); font-size: .92rem; }
.fs-search-summary button { padding: 0; border: 0; background: none; color: var(--aqua); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.fs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin-top: 32px; }
.fs-tile { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.fs-tile:hover { border-color: #b3c7c3; box-shadow: 0 14px 32px rgba(11, 32, 39, .08); transform: translateY(-2px); }
.fs-tile:focus-visible { outline: 3px solid rgba(23, 107, 114, .4); outline-offset: 2px; }
/* Category-tile framing (corrected 2026-09-28). Every picture is contained: the whole subject shows,
   never cropped and never drawn larger than its own pixels. The img box is sized to the picture itself
   (auto size inside max bounds, centred), so spacing, the book shadow and edge feathering apply to the
   picture, not to the letterbox. Each tile's backdrop continues the photo's own studio background: flat
   where that background is uniform, gradients sampled from the image's edges where it is graded (bags,
   model kit, cap, axolotl). If a tile image is replaced, re-sample its backdrop. */
.fs-tile-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f2f5f4; }
.fs-tile-media img { position: absolute; inset: 0; width: auto; height: auto; max-width: 100%; max-height: var(--tile-fit, 100%); margin: auto; }
.fs-tile-media.is-feathered img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(180deg, transparent, #000 1.5%, #000 98.5%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(180deg, transparent, #000 1.5%, #000 98.5%, transparent); mask-composite: intersect; }
.fs-tile--aquariums { background: #ffffff; }
.fs-tile--supplies { background: #ffffff; }
.fs-tile--clothing { --tile-fit: 94%; background: #fdfcf6; }
.fs-tile--bags { --tile-fit: 92%; background:
    linear-gradient(90deg, #e1d5c7 15.5%, #e2d7c8 24.12%, #e6dacd 32.75%, #e7dbcd 41.38%, #e9decf 50.0%, #e9decf 58.62%, #e8ddce 67.25%, #e7dbcd 75.88%, #e6dacc 84.5%) top / 100% 4.5% no-repeat,
    linear-gradient(90deg, #e7dbcf 15.5%, #e6d9cd 24.12%, #e8dace 32.75%, #eadbd0 41.38%, #eadcd0 50.0%, #eaddd1 58.62%, #e9ddd1 67.25%, #e9ddd1 75.88%, #eadfd3 84.5%) bottom / 100% 4.5% no-repeat,
    linear-gradient(180deg, #dfd4c5 4.0%, #e1d6c7 15.5%, #e1d6c8 27.0%, #e1d6c7 38.5%, #e0d5c6 50.0%, #ded3c5 61.5%, #dccfc0 73.0%, #dccec0 84.5%, #e7dbcf 96.0%) left / 50% 100% no-repeat,
    linear-gradient(180deg, #e6dacc 4.0%, #e6dacc 15.5%, #e7dbcd 27.0%, #e7dbcd 38.5%, #e4d9cb 50.0%, #e4d9cb 61.5%, #e4d9cb 73.0%, #e7dbcf 84.5%, #eadfd3 96.0%) right / 50% 100% no-repeat; }
.fs-tile--toys { background:
    linear-gradient(180deg, #efe5dd 0.0%, #efe6de 12.5%, #f2eae1 25.0%, #f3ebe4 37.5%, #f3ebe3 50.0%, #f5ede7 62.5%, #f6efe8 75.0%, #f6eee8 87.5%, #f5ede7 100.0%) left / 50% 100% no-repeat,
    linear-gradient(180deg, #e6dace 0.0%, #e6dbcf 12.5%, #e9dfd4 25.0%, #ebe1d6 37.5%, #ece2d8 50.0%, #ebe1d6 62.5%, #efe8dd 75.0%, #f0e9de 87.5%, #efe6db 100.0%) right / 50% 100% no-repeat; }
.fs-tile--accessories { background:
    linear-gradient(180deg, #e0e4e7 0.0%, #e0e4e7 12.5%, #e0e4e7 25.0%, #e0e4e7 37.5%, #e2e6e9 50.0%, #e3e7eb 62.5%, #e6eaed 75.0%, #e8ecef 87.5%, #e9edf0 100.0%) left / 50% 100% no-repeat,
    linear-gradient(180deg, #e4e8eb 0.0%, #e1e5e8 12.5%, #e2e5e9 25.0%, #e2e6e9 37.5%, #e3e7eb 50.0%, #dde1e4 62.5%, #e6eaed 75.0%, #e9edf1 87.5%, #e9edf0 100.0%) right / 50% 100% no-repeat; }
.fs-tile--books { --tile-fit: 84%; background: var(--surface-2); }
.fs-tile--books img { border-radius: 3px; box-shadow: 0 1px 2px rgba(11, 32, 39, .14), 0 10px 22px rgba(11, 32, 39, .16); }
.fs-tile--art { --tile-fit: 94%; background:
    linear-gradient(90deg, #d7c7b8 14.75%, #ddcdbe 23.56%, #e0d1c4 32.38%, #e4d6c8 41.19%, #e6d9ca 50.0%, #e2d4c4 58.81%, #e0d1c2 67.62%, #dbcbba 76.44%, #d5c6b5 85.25%) top / 100% 3.5% no-repeat,
    linear-gradient(90deg, #f1e7db 14.75%, #f0e4d8 23.56%, #f2e7dc 32.38%, #f4e8dd 41.19%, #f4e9de 50.0%, #f4eadf 58.81%, #f3e8dd 67.62%, #f4e9df 76.44%, #f4e9df 85.25%) bottom / 100% 3.5% no-repeat,
    linear-gradient(180deg, #d5c5b6 3.0%, #dacabb 14.75%, #dfd0c1 26.5%, #dfd0c1 38.25%, #e1d4c5 50.0%, #e0d3c3 61.75%, #e4d7ca 73.5%, #ebded1 85.25%, #f0e5d9 97.0%) left / 50% 100% no-repeat,
    linear-gradient(180deg, #d6c7b5 3.0%, #dacbb9 14.75%, #dccdbb 26.5%, #e0d1c1 38.25%, #e0d0bf 50.0%, #e2d2c1 61.75%, #e7dccd 73.5%, #f0e5d9 85.25%, #f4eae0 97.0%) right / 50% 100% no-repeat; }
.fs-tile-text { display: grid; align-content: start; gap: 3px; padding: 12px 14px 14px; }
.fs-tile-text strong { font: 600 1rem/1.25 "Avenir Next", Avenir, Inter, sans-serif; letter-spacing: -.01em; }
.fs-tile-text small { color: var(--muted); font-size: .8rem; line-height: 1.35; }

/* ---- Sections ---- */
.fs-section { padding: 52px 0 60px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 8px); }
.fs-anchor { display: block; height: 0; scroll-margin-top: calc(var(--header) + 52px); }
.fs-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.fs-section-head h2 { margin: 0 0 6px; }
.fs-section-head p { max-width: 62ch; margin: 0; color: var(--muted); }

/* One text-link style for section-level navigation. */
.fs-link { display: inline-block; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(11, 32, 39, .28); text-underline-offset: 5px; transition: text-decoration-color .15s ease; }
.fs-link > span[aria-hidden] { display: inline-block; margin-left: 6px; }
.fs-link:hover { text-decoration-color: currentColor; }

/* ---- Filters: chips for the first level, one select revealed for the second level ---- */
.fs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 22px; }
.fs-segments { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chip { min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .86rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.fs-chip:hover { border-color: #93aca7; }
.fs-chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.fs-select { min-height: 38px; max-width: 100%; padding: 0 40px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5' fill='none' stroke='%230b2027' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px; color: var(--ink); font-size: .86rem; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; }
.fs-select:hover { border-color: #93aca7; }
.fs-filter-label { color: var(--ink); font-size: .86rem; font-weight: 600; }
#supplies-brand { min-width: 190px; }
.fs-chip:focus-visible, .fs-select:focus-visible, .fs-more:focus-visible, .fs-link:focus-visible, .fs-brand-card:focus-visible { outline: 3px solid rgba(23, 107, 114, .4); outline-offset: 2px; }
.fs-note { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; text-align: right; }

/* ---- Product grid and the one product card ---- */
.fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fs-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; }
.fs-card:hover { border-color: #b3c7c3; box-shadow: 0 14px 32px rgba(11, 32, 39, .08); }
.fs-card:has(.fs-card-hit:focus-visible) { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(23, 107, 114, .22); }
.fs-card-media { position: relative; aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid #edf2f1; background: #fff; }
.fs-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: transform .3s ease; }
.fs-card-media.is-cover { background: #f2f5f4; }
.fs-card-media.is-cover img { object-fit: cover; padding: 0; }
.fs-card-brand { position: absolute; top: 10px; left: 10px; z-index: 2; max-width: calc(100% - 20px); overflow: hidden; padding: 5px 9px; border: 1px solid #d7e4e2; border-radius: 999px; background: rgba(255,255,255,.96); color: #103a43; font: 700 .62rem/1.1 "JetBrains Mono", monospace; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
[data-merch-grid] .fs-card-media::after { content: "FishSnap Originals"; position: absolute; top: 10px; left: 10px; z-index: 2; max-width: calc(100% - 20px); overflow: hidden; padding: 5px 9px; border: 1px solid #d7e4e2; border-radius: 999px; background: rgba(255,255,255,.96); color: #103a43; font: 700 .62rem/1.1 "JetBrains Mono", monospace; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.fs-card:hover .fs-card-media img { transform: scale(1.03); }
.fs-card-status { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 5px 9px; border-radius: 999px; background: #b8501a; color: #fff; font: 600 .62rem/1 "JetBrains Mono", monospace; letter-spacing: .02em; }
.fs-card-body { display: flex; flex: 1; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
.fs-card-kicker { overflow: hidden; margin: 0; color: var(--aqua); font: 600 .66rem/1.35 "JetBrains Mono", monospace; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.fs-card-title { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink); font: 600 1rem/1.32 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fs-card-hit { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.fs-card-hit::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fs-card-hit:focus-visible { outline: none; }
.fs-card-price { margin: auto 0 0; padding-top: 6px; color: var(--ink); font-size: .98rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-card-price small { margin-left: 4px; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .03em; }
.fs-card-price.is-info { color: var(--muted); font-size: .84rem; font-weight: 500; }
.fs-empty { grid-column: 1 / -1; margin: 0; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }

.fs-grid-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.fs-count { margin: 0; color: var(--muted); font-size: .84rem; }
.fs-count:empty { display: none; }
.fs-more { min-width: 180px; }

/* ---- One-line, user-controlled brand rail ---- */
.fs-brands .fs-section-head { align-items: center; }
.fs-brand-controls { display: flex; justify-content: flex-end; gap: 8px; margin: -52px 0 16px; }
.fs-brand-arrow { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.fs-brand-arrow:disabled { opacity: .35; cursor: default; }
.fs-brand-arrow:focus-visible { outline: 3px solid rgba(23, 107, 114, .4); outline-offset: 2px; }
.fs-brand-row { display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fs-brand-card { display: flex; flex: 0 0 clamp(190px, 25vw, 248px); flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); text-decoration: none; scroll-snap-align: start; transition: border-color .18s ease, box-shadow .18s ease; }
.fs-brand-card:hover { border-color: #b3c7c3; box-shadow: 0 14px 32px rgba(11, 32, 39, .08); }
.fs-brand-logo { display: flex; align-items: center; height: 40px; }
.fs-brand-logo img { width: auto; max-width: 170px; max-height: 36px; object-fit: contain; }
.fs-brand-logo.is-waterbox img { filter: brightness(0); }
.fs-brand-logo.is-seachem img { max-height: 46px; }
.fs-brand-logo.is-seachem { height: 48px; }
.fs-brand-card small { font-size: .82rem; white-space: nowrap; }

/* ---- Makers band (secondary, last) and the design-preview dialog ---- */
.fs-maker { padding: 56px 0 72px; border-top: 1px solid var(--line); background: var(--bg); }
.fs-maker .merch-supply-card { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; border-color: var(--line); border-radius: 16px; }
.fs-maker .merch-supply-card figure { padding: 20px; }
.fs-maker .merch-supply-card figcaption { display: none; }
.fs-maker .merch-supply-copy { padding: 32px 40px; }
.fs-maker .merch-supply-copy h2 { margin: 10px 0 14px; }
.fs-maker .merch-supply-copy > p { margin-bottom: 22px; }
.fs-preview-status { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: .85rem; line-height: 1.45; }

/* ---- Wider screens ---- */
@media (min-width: 720px) {
  .fs-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .fs-brand-row { gap: 16px; }
}
@media (min-width: 1024px) {
  .fs-hero { padding: 36px 0 64px; }
  .fs-hero.is-searching { padding-bottom: 24px; }
  .fs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .fs-section { padding: 64px 0 72px; }
}

@media (max-width: 1023px) {
  .fs-hero-top { grid-template-columns: 1fr; gap: 18px; }
  .fs-ad { width: min(100%, 520px); }
}

@media (max-width: 719px) {
  .fs-brand-controls { margin: 0 0 14px; }
  .fs-brand-card { flex-basis: 190px; }
}

/* ---- Phones ---- */
@media (max-width: 719px) {
  .fs-hero { padding: 20px 0 40px; }
  .fs-hero.is-searching { padding-bottom: 16px; }
  .fs-hero .crumbs { margin-bottom: 14px; }
  .fs-hero-sub { font-size: .98rem; }
  .fs-ad-slides { height: 152px; }
  .fs-ad-slide { grid-template-columns: minmax(0, 1fr) 112px; }
  .fs-ad-slide img { height: 128px; }
  .fs-search { padding: 4px; }
  .fs-search-icon { left: 15px; width: 18px; height: 18px; }
  .fs-search input { height: 44px; padding-left: 38px; font-size: 1rem; }
  .fs-search .btn { min-height: 44px; padding: 0 16px; }
  .fs-tiles { gap: 10px; margin-top: 24px; }
  .fs-tile { border-radius: 14px; }
  .fs-tile-text { padding: 10px 12px 12px; }
  .fs-tile-text strong { font-size: .92rem; }
  .fs-tile-text small { font-size: .74rem; }
  .fs-section { padding: 40px 0 48px; }
  .fs-anchor { scroll-margin-top: calc(var(--header) + 40px); }
  .fs-section-head { margin-bottom: 16px; }
  .fs-filters { gap: 8px; margin-bottom: 18px; }
  .fs-segments { gap: 6px; }
  .fs-chip { min-height: 36px; padding: 0 11px; font-size: .8rem; }
  .fs-select { min-height: 36px; font-size: .82rem; }
  .fs-note { flex-basis: 100%; text-align: left; }
  .fs-grid { gap: 10px; }
  .fs-card { border-radius: 14px; }
  .fs-card-status { right: 8px; bottom: 8px; padding: 4px 7px; font-size: .56rem; }
  .fs-card-body { gap: 4px; padding: 10px 12px 12px; }
  .fs-card-kicker { font-size: .58rem; }
  .fs-card-title { font-size: .9rem; }
  .fs-card-price { font-size: .9rem; }
  .fs-card-price.is-info { font-size: .76rem; }
  .fs-grid-foot { margin-top: 20px; }
  .fs-maker { padding: 40px 0 56px; }
  .fs-maker .merch-supply-card { grid-template-columns: 1fr; }
  .fs-maker .merch-supply-card figure { display: none; }
  .fs-maker .merch-supply-copy { padding: 24px 20px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-tile, .fs-card, .fs-card-media img { transition: none; }
  .fs-tile:hover { transform: none; }
  .fs-card:hover .fs-card-media img { transform: none; }
}