/* These themes target the ?hero= collection sections used by the dropdown. */
body[data-collection-theme] {
  --hero-pattern:repeating-linear-gradient(135deg,#ffffff08 0 1px,transparent 1px 22px);
  background:radial-gradient(ellipse at 90% 5%,color-mix(in srgb,var(--hero-second) 16%,transparent),transparent 50%),#0b101c;
}
body[data-collection-theme] .hero-flat .ratings-intro {
  isolation:isolate;min-height:190px;padding:27px 150px 27px 26px;
  border:1px solid color-mix(in srgb,var(--hero-accent) 65%,#172033);
  border-left:5px solid var(--hero-accent);border-radius:10px;
  background:linear-gradient(100deg,var(--hero-panel) 10%,color-mix(in srgb,var(--hero-panel) 85%,#090e1a) 95%);
  box-shadow:0 14px 35px #0005,inset 0 0 40px #ffffff03;
}
body[data-collection-theme] .hero-flat .ratings-intro:before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--hero-pattern);background-size:var(--hero-pattern-size,auto);
  opacity:.55;mask-image:linear-gradient(90deg,transparent,#000 90%);
}
body[data-collection-theme] .hero-flat .ratings-intro:after {
  content:'';position:absolute;width:108px;height:108px;right:25px;top:50%;
  transform:translateY(-50%);background:var(--hero-emblem) center/contain no-repeat;
  opacity:.6;pointer-events:none;filter:drop-shadow(0 0 20px color-mix(in srgb,var(--hero-accent) 20%,transparent));
}
body[data-collection-theme] .hero-flat .ratings-eyebrow {display:block;color:var(--hero-second);font:800 10px/1.5 'DM Sans',system-ui,sans-serif;letter-spacing:2px;}
body[data-collection-theme] .hero-flat .ratings-intro h2 {color:var(--hero-accent);margin:12px 0;font-size:clamp(28px,3.6vw,46px);letter-spacing:1.3px;overflow-wrap:anywhere;text-shadow:2px 3px 0 #0005;}
body[data-collection-theme] .hero-flat .ratings-intro p {color:#e0e7f2;font-size:13px;line-height:1.65;max-width:580px;}
body[data-collection-theme] .hero-flat .collection-total {display:block;margin-top:13px;color:#bfcddd;font:700 11px/1.4 'DM Sans',system-ui,sans-serif;letter-spacing:.3px;}
body[data-collection-theme] .library-title {color:var(--hero-accent);}
body[data-collection-theme] .result-count,body[data-collection-theme] .active-description {color:#c3cedf;}
body[data-collection-theme] .search-wrap input,body[data-collection-theme] .field-select,body[data-collection-theme] .mobile-quick-filters select {
  background:linear-gradient(130deg,var(--hero-panel),#141c2c);border:1px solid color-mix(in srgb,var(--hero-second) 42%,#29344a);color:#f3f6fb;
}
body[data-collection-theme] .search-wrap input::placeholder {color:#afbbcd;}
body[data-collection-theme] .view-switch {border-color:color-mix(in srgb,var(--hero-accent) 55%,#1b2538);background:var(--hero-panel);}
body[data-collection-theme] .view-switch button {color:#c4cfdf;}
body[data-collection-theme] .view-switch button.active {background:var(--hero-accent);color:#111928;}
body[data-collection-theme] .hero-flat .comic-card {
  border:1px solid color-mix(in srgb,var(--hero-second) 38%,#1e293d);border-radius:9px;
  background:var(--hero-panel);box-shadow:0 7px 18px #0005;overflow:hidden;
}
body[data-collection-theme] .hero-flat .comic-card .card-body {
  background:linear-gradient(140deg,var(--hero-panel),#151d2b);border-top:3px solid color-mix(in srgb,var(--hero-accent) 65%,var(--hero-panel));
}
body[data-collection-theme] .hero-flat .comic-card .card-title {color:#f8faff;}
body[data-collection-theme] .hero-flat .comic-card .card-authors,body[data-collection-theme] .hero-flat .no-rating {color:#b8c4d5;}
body[data-collection-theme] .hero-flat .format-chip {border-color:color-mix(in srgb,var(--hero-second) 40%,#27354b);background:color-mix(in srgb,var(--hero-panel) 85%,var(--hero-second));color:#e1eaf7;}
body[data-collection-theme] .hero-flat .comic-card:hover,body[data-collection-theme] .hero-flat .comic-card:focus-visible {border-color:var(--hero-accent);box-shadow:0 8px 24px #0005,0 0 0 1px var(--hero-accent);}
body[data-collection-theme] .hero-flat .ownership-check:not(.owned) {background:#111a2de8;border-color:var(--hero-accent);color:var(--hero-accent);}
body[data-collection-theme] :is(input,select,button,a):focus-visible {outline:2px solid var(--hero-accent);outline-offset:3px;}
body[data-collection-theme] .hero-flat .comic-grid {margin-top:23px;}
body[data-collection-theme='cerebro'] {--hero-pattern:linear-gradient(45deg,transparent 45%,#66bfff25 45% 48%,transparent 48% 52%,#66bfff25 52% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#ffe06d24 45% 48%,transparent 48% 52%,#ffe06d24 52% 55%,transparent 55%),repeating-linear-gradient(0deg,transparent 0 39px,#66bfff15 40px),repeating-linear-gradient(90deg,transparent 0 39px,#66bfff15 40px);}
body[data-collection-theme='skyline'] {--hero-pattern:linear-gradient(0deg,#070c17 0 27%,transparent 27%),repeating-linear-gradient(90deg,transparent 0 28px,#050b1670 28px 60px,transparent 60px 79px),repeating-linear-gradient(115deg,transparent 0 26px,#9bbed41b 27px,transparent 28px 55px);}
body[data-collection-theme='wings'] {--hero-pattern:linear-gradient(155deg,transparent 28%,#77d8ff20 28% 32%,transparent 32% 40%,#428aff25 40% 43%,transparent 43%),linear-gradient(25deg,transparent 58%,#77d8ff20 58% 63%,transparent 63%);}
body[data-collection-theme='diamonds'] {--hero-pattern:repeating-conic-gradient(from 45deg,#ff95b421 0 25%,transparent 0 50%);--hero-pattern-size:55px 55px;}
body[data-collection-theme='rings'] {--hero-pattern:repeating-radial-gradient(circle at 85% 50%,transparent 0 19px,#74ec9a30 20px 22px,transparent 23px 40px);}
body[data-collection-theme='web'] {--hero-pattern:repeating-radial-gradient(circle at 87% 48%,transparent 0 24px,#b2d5ff30 25px 26px,transparent 27px 48px),repeating-conic-gradient(from 0deg at 87% 48%,transparent 0deg 28deg,#eebbbc36 29deg 30deg);}
body[data-collection-theme='tendrils'] {--hero-pattern:repeating-radial-gradient(ellipse at 105% 100%,transparent 0 19px,#d4e8f01c 20px 24px,transparent 25px 49px);}
body[data-collection-theme='slashes'] {--hero-pattern:repeating-linear-gradient(135deg,transparent 0 35px,#ff979b30 36px 39px,#090e1a66 40px 55px,transparent 56px 90px);}
body[data-collection-theme='claws'] {--hero-pattern:linear-gradient(105deg,transparent 60%,#ffdf7240 60% 61%,transparent 62% 68%,#ffdf7230 68% 69%,transparent 70% 76%,#ffdf7240 76% 77%,transparent 78%);}
body[data-collection-theme='triangles'] {--hero-pattern:repeating-conic-gradient(from 30deg at 50% 75%,#ab85e920 0deg 60deg,transparent 60deg 120deg);--hero-pattern-size:68px 90px;}
body[data-collection-theme='stars'] {--hero-pattern:radial-gradient(circle,#f0ca7770 0 1px,transparent 2px),linear-gradient(125deg,transparent 45%,#a8d4ff18 45% 48%,transparent 48%);--hero-pattern-size:24px 24px,auto;}
body[data-collection-theme='target'] {--hero-pattern:repeating-radial-gradient(circle at 85% 50%,transparent 0 28px,#ffa4a321 29px 38px,transparent 39px 65px);}
body[data-collection-theme='brick'] {--hero-pattern:linear-gradient(#ff8c8c20 1px,transparent 1px),linear-gradient(90deg,#ff8c8c20 1px,transparent 1px);--hero-pattern-size:60px 28px;}
body[data-collection-theme='flames'] {--hero-pattern:radial-gradient(ellipse at 76% 125%,#ffbc7860,transparent 45%),repeating-conic-gradient(from 160deg at 85% 100%,transparent 0deg 18deg,#ff665723 19deg 27deg);}
body[data-collection-theme='cracks'] {--hero-pattern:linear-gradient(36deg,transparent 47%,#b6ed8136 48% 49%,transparent 50%),linear-gradient(-68deg,transparent 63%,#c398ed30 64% 65%,transparent 66%);--hero-pattern-size:110px 90px,170px 130px;}
body[data-collection-theme='lightning'] {--hero-pattern:repeating-conic-gradient(from 25deg at 92% 20%,transparent 0deg 30deg,#acdfff29 31deg 34deg,transparent 35deg 68deg);}
body[data-collection-theme='speed'] {--hero-pattern:repeating-linear-gradient(-25deg,transparent 0 23px,#71d5ff20 24px 27px,transparent 28px 58px);}
body[data-collection-theme='scars'] {--hero-pattern:repeating-linear-gradient(120deg,transparent 0 46px,#f1d7b723 47px 49px,transparent 50px 53px,#e8918320 54px 56px,transparent 57px 100px);}
body[data-collection-theme='orbit'] {--hero-pattern:repeating-radial-gradient(ellipse at 94% 5%,transparent 0 30px,#c9b4ff28 31px 33px,transparent 34px 65px),radial-gradient(circle,#91f1f078 0 1px,transparent 2px);--hero-pattern-size:auto,35px 35px;}
body[data-collection-theme='sun'] {--hero-pattern:repeating-conic-gradient(from 0deg at 85% 50%,#ffd08020 0deg 6deg,transparent 7deg 18deg);}
body[data-collection-theme='sewer'] {--hero-pattern:repeating-radial-gradient(circle at 85% 50%,transparent 0 25px,#a8efa127 26px 28px,transparent 29px 45px),linear-gradient(0deg,#050b1644 1px,transparent 1px);--hero-pattern-size:auto,auto 30px;}
@media(max-width:780px) {
  body[data-collection-theme] .hero-flat .ratings-intro {padding:21px 90px 21px 18px;min-height:175px;}
  body[data-collection-theme] .hero-flat .ratings-intro:after {width:67px;height:67px;right:14px;opacity:.55;}
  body[data-collection-theme] .hero-flat .ratings-eyebrow {font-size:9px;letter-spacing:1.1px;}
  body[data-collection-theme] .hero-flat .ratings-intro h2 {font-size:clamp(27px,7.5vw,38px);line-height:1.08;letter-spacing:.7px;}
  body[data-collection-theme] .hero-flat .ratings-intro p {font-size:12px;}
  body[data-collection-theme] .hero-flat .collection-total {font-size:10px;}
  body[data-collection-theme] .search-wrap input,body[data-collection-theme] .field-select {font-size:16px;}
}
@media(max-width:360px) {
  body[data-collection-theme] .hero-flat .ratings-intro {padding-right:64px;}
  body[data-collection-theme] .hero-flat .ratings-intro:after {width:43px;height:43px;right:10px;}
}
@media(prefers-reduced-motion:reduce) {body[data-collection-theme] .hero-flat .comic-card {transition:none;}}