.doujin-pilot { padding-bottom: 3rem; }
.catalogue-page.doujin-pilot.has-breadcrumb { padding-top: 1rem; }
.doujin-pilot .works-preview-breadcrumb { margin-bottom: .5rem; }
.doujin-pilot .catalogue-header { max-width: none; margin: 0 0 .65rem; }
.doujin-pilot .catalogue-header h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.3; }
.doujin-pilot .catalogue-header .doujin-pilot-intro { max-width: 48rem; margin: .3rem 0 0; font-size: .85rem; line-height: 1.5; }
.doujin-pilot-links { margin: .4rem 0 0; font-size: .85rem; }

/* Results meta row: the work count is the primary signal; the Provider note
   is deliberately low-priority so it never adds Hero height. */
.doujin-results-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; }
.doujin-provider-note { margin: 0; font-size: .78rem; color: var(--muted); }

/* Advanced controls are closed natively at every width; sale and sort stay
   outside so the first view offers both a quick choice and visible works. */
.doujin-filters-panel { margin: .65rem 0; border: 1px solid var(--line); border-radius: .6rem; background: #fff; }
.doujin-filters-collapse { border: 0; }
.doujin-filters-summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 44px; padding: .15rem .75rem; color: var(--ink); cursor: pointer; font-size: .9rem; font-weight: 750; list-style: none; }
.doujin-filters-summary::-webkit-details-marker { display: none; }
.doujin-filters-summary::after { content: "+"; font-size: 1.3rem; font-weight: 500; }
.doujin-filters-collapse[open] > .doujin-filters-summary::after { content: "−"; }
.doujin-filters-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.doujin-filters-badge { margin-left: auto; padding: .15rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .74rem; font-weight: 700; }
.doujin-filters { display: grid; gap: 1rem; padding: .75rem; border-top: 1px solid var(--line); }
.doujin-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.doujin-filter-group legend { margin: 0 0 .5rem; padding: 0; color: var(--muted); font-size: .85rem; font-weight: 750; letter-spacing: .08em; }
.doujin-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.doujin-pill { position: relative; display: inline-flex; }
.doujin-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.doujin-pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .88rem; font-weight: 700; line-height: 1.4; transition: border-color .16s ease, background .16s ease; }
.doujin-pill:hover span { border-color: var(--accent); background: var(--accent-soft); }
.doujin-pill input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.doujin-pill input[type="checkbox"]:checked + span::before { content: "✓"; margin-right: .35rem; }
.doujin-pill input:focus-visible + span { outline: 3px solid #c68d35; outline-offset: 3px; }

.doujin-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 0; }
.doujin-tags span { padding: .08rem .45rem; border-radius: 999px; background: var(--mist); color: var(--muted); font-size: .75rem; }
.doujin-pilot [data-doujin-count]:focus { outline: none; }

/* Unofficial English title: the Japanese original stays visible as a quiet
   secondary line on cards and as a labelled row on the detail page. */
.doujin-card-original { display: -webkit-box; margin: .2rem 0 0; overflow: hidden; color: var(--muted); font-size: .76rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.doujin-detail-original { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin: .7rem 0 0; font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }
.doujin-detail-original-label { color: var(--muted); }
.doujin-detail-translation-note { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }
.doujin-detail-summary { max-width: 46rem; margin: 0; line-height: 1.85; }

/* Browser-language suggestion: a non-modal strip below the header, shown
   at most once and never navigating on its own. */
.lang-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--accent-soft); font-size: .88rem; }
.lang-suggest[hidden] { display: none; }
.lang-suggest-text { margin: 0; font-weight: 700; }
.lang-suggest-actions { display: flex; gap: .5rem; }
.lang-suggest-accept, .lang-suggest-dismiss { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem; border: 1px solid var(--ink); border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.lang-suggest-accept { background: var(--ink); color: #fff; }
.lang-suggest-accept:hover { color: #fff; opacity: .9; }
.lang-suggest-dismiss { background: #fff; color: var(--ink); }
.lang-suggest-accept:focus-visible, .lang-suggest-dismiss:focus-visible { outline: 3px solid #c68d35; outline-offset: 2px; }

/* Detail */
.doujin-detail { max-width: 58rem; padding-bottom: 3.5rem; }
.doujin-detail-layout { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.25rem; align-items: start; margin-top: 1.5rem; }
.doujin-detail-media { display: grid; place-items: center; padding: .5rem; border-radius: .65rem; background: var(--mist); }
.doujin-detail-image { display: block; width: 100%; max-height: 28rem; object-fit: contain; }
.doujin-detail-info .eyebrow { margin-bottom: .6rem; }
.doujin-detail-title { max-width: none; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.4; overflow-wrap: anywhere; }
.doujin-detail-meta { display: grid; gap: .3rem; margin: 1.1rem 0 0; font-size: .92rem; }
.doujin-detail-meta > div { display: flex; gap: .75rem; }
.doujin-detail-meta dt { flex: 0 0 5.5em; color: var(--muted); }
.doujin-detail-meta dd { margin: 0; overflow-wrap: anywhere; }
.doujin-detail-price { display: flex; align-items: baseline; gap: .75rem; margin: 1rem 0 0; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.4; }
.doujin-detail-price span { color: var(--muted); font-size: .92rem; font-weight: 400; }
.doujin-detail-cta { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.doujin-detail-cta .works-preview-affiliate-disclosure { margin: 0 0 .75rem; font-size: 11px; }
.doujin-detail-price-note { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.doujin-detail-intro-section { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.doujin-detail-intro-section h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.doujin-detail-intro { max-width: 46rem; margin: 0; white-space: pre-wrap; line-height: 1.85; }

@media (prefers-reduced-motion: reduce) {
  .doujin-pill span { transition: none; }
}
@media (max-width: 760px) {
  .doujin-detail-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  .doujin-detail-media { max-width: 24rem; width: 100%; justify-self: center; }
  .doujin-detail-image { max-height: 22rem; }
  .doujin-detail-intro-section { margin-top: 2rem; }
}
@media (max-width: 600px) {
  .doujin-filters { gap: .85rem; }
  .doujin-pills { gap: .4rem; }
  .doujin-pill span { min-height: 38px; padding: 0 .8rem; font-size: .84rem; }
  .doujin-detail-title { font-size: 1.45rem; }
  .doujin-detail-price { font-size: 1.4rem; }
}