/* HSC1-only layout. Loaded only by pokemon-amada-hyper-sticker-collection-1.html. */
body.hsc1-page {
  --bg:#0a1416;
  --bg-deeper:#050a0b;
  --ink:#d6e2e0;
  --ink-dim:#8a9896;
  --ink-faint:#4a5856;
  --teal:#6db5b0;
  --teal-bright:#8ed4cf;
  --teal-deep:#2d5654;
  --blood:#a93942;
  --bronze:#8b7344;
  --bronze-bright:#c9a968;
  --line:#1f2e30;
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  background-image:radial-gradient(ellipse at top center, rgba(109,181,176,0.06) 0%, transparent 60%), radial-gradient(ellipse at bottom center, rgba(169,57,66,0.04) 0%, transparent 50%);
  color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  line-height:1.6;
}

body.hsc1-page *,
body.hsc1-page *::before,
body.hsc1-page *::after { box-sizing:border-box; }

body.hsc1-page .page-head {
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:48px 32px 12px;
  text-align:center;
}
body.hsc1-page .relics-back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:6px 12px;
  border:1px solid transparent;
  color:var(--ink-dim);
  font:10px/1.4 'IBM Plex Mono',monospace;
  letter-spacing:0.3em;
  text-decoration:none;
  text-transform:uppercase;
  transition:all 0.2s ease;
}
body.hsc1-page .relics-back:hover { color:var(--teal-bright); border-color:var(--line); }
body.hsc1-page .eyebrow {
  margin-bottom:14px;
  color:var(--bronze-bright);
  font:11px/1.4 'Cinzel',serif;
  letter-spacing:0.45em;
  text-transform:uppercase;
}
body.hsc1-page .eyebrow::before,
body.hsc1-page .eyebrow::after { content:'\25C6'; color:var(--blood); margin:0 12px; font-size:9px; }
body.hsc1-page .page-title {
  margin:0 0 18px;
  color:var(--ink);
  font-family:'Cinzel',serif;
  font-size:clamp(20px,4.5vw,42px);
  font-weight:900;
  letter-spacing:0.04em;
  white-space:nowrap;
}
body.hsc1-page .page-title em {
  color:var(--teal-bright);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  text-shadow:0 0 18px rgba(141,212,207,0.4);
}
body.hsc1-page .meta-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:8px; }
body.hsc1-page .meta-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:6px 14px;
  border:1px solid var(--line);
  background:rgba(15,28,30,0.4);
  color:var(--ink-dim);
  font:10px/1.4 'IBM Plex Mono',monospace;
  letter-spacing:0.22em;
  text-transform:uppercase;
}
body.hsc1-page .meta-badge .k { color:var(--bronze-bright); }
body.hsc1-page .meta-badge .v { color:var(--teal-bright); font-weight:600; }

body.hsc1-page .set-desc,
body.hsc1-page .first-print,
body.hsc1-page .pack-art,
body.hsc1-page .sticker-head,
body.hsc1-page .sets-wrap {
  position:relative;
  z-index:2;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:32px;
  padding-right:32px;
}
body.hsc1-page .set-desc { max-width:1400px; margin-top:36px; }
body.hsc1-page .set-desc-head,
body.hsc1-page .pack-art-head {
  margin-bottom:28px;
  color:var(--bronze-bright);
  font:11px/1.4 'Cinzel',serif;
  letter-spacing:0.4em;
  text-align:center;
  text-transform:uppercase;
}
body.hsc1-page .set-desc-head::before,
body.hsc1-page .set-desc-head::after,
body.hsc1-page .pack-art-head::before,
body.hsc1-page .pack-art-head::after { content:'\25C6 '; opacity:0.5; }

body.hsc1-page .set-grid {
  display:grid;
  gap:18px 28px;
  max-width:1400px;
  margin:0 auto;
}
body.hsc1-page .set-grid-1 { grid-template-columns:1fr; max-width:700px; }
body.hsc1-page .set-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:900px; }
body.hsc1-page .set-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:1100px; }
body.hsc1-page .set-grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
body.hsc1-page .set-grid-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
body.hsc1-page .set-grid-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
body.hsc1-page .set-grid .t {
  margin:0 0 12px;
  padding:0;
  font-family:'Bungee Outline',sans-serif;
  font-size:24px;
  font-weight:400;
  letter-spacing:0.08em;
  line-height:1.3;
  text-align:center;
  text-transform:uppercase;
  -webkit-text-stroke:0.6px currentColor;
}
body.hsc1-page .set-grid .t:nth-of-type(5n+1) { color:#8ed4cf; text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 6px #8ed4cf,0 0 14px #8ed4cf,0 0 28px rgba(141,212,207,0.85),0 0 50px rgba(141,212,207,0.55),0 0 90px rgba(141,212,207,0.3); }
body.hsc1-page .set-grid .t:nth-of-type(5n+2) { color:#ff6fb5; text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 6px #ff6fb5,0 0 14px #ff6fb5,0 0 28px rgba(255,111,181,0.85),0 0 50px rgba(255,111,181,0.55),0 0 90px rgba(255,111,181,0.3); }
body.hsc1-page .set-grid .t:nth-of-type(5n+3) { color:#f5d678; text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 6px #f5d678,0 0 14px #f5d678,0 0 28px rgba(245,214,120,0.85),0 0 50px rgba(245,214,120,0.55),0 0 90px rgba(245,214,120,0.3); }
body.hsc1-page .set-grid .t:nth-of-type(5n+4) { color:#7fb6ff; text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 6px #7fb6ff,0 0 14px #7fb6ff,0 0 28px rgba(127,182,255,0.85),0 0 50px rgba(127,182,255,0.55),0 0 90px rgba(127,182,255,0.3); }
body.hsc1-page .set-grid .t:nth-of-type(5n+5) { color:#ff7e7e; text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 6px #ff7e7e,0 0 14px #ff7e7e,0 0 28px rgba(255,126,126,0.85),0 0 50px rgba(255,126,126,0.55),0 0 90px rgba(255,126,126,0.3); }
body.hsc1-page .set-grid .b { margin:0; color:var(--ink); font:15px/1.55 'Cormorant Garamond',serif; text-align:left; }

body.hsc1-page .pack-art { max-width:1200px; margin-top:44px; text-align:center; }
body.hsc1-page .pack-art-head { margin-bottom:18px; }
body.hsc1-page .pack-art .sets-grid {
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:clamp(8px,2.2vw,24px);
  max-width:780px;
  margin:0 auto;
  padding:0;
}
body.hsc1-page .pack-art .set-tile.pack-art-tile {
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(5px,1.5vw,12px);
  min-height:0;
  padding:clamp(8px,1.6vw,18px);
}
body.hsc1-page .pack-art .set-tile.pack-art-tile .ph-f,
body.hsc1-page .pack-art .set-tile.pack-art-tile .ph-b {
  flex:1 1 0 !important;
  width:auto !important;
  max-width:130px !important;
  min-width:0 !important;
  height:clamp(84px,21vw,150px) !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
}
body.hsc1-page .pack-art .set-tile.pack-art-tile .sn,
body.hsc1-page .pack-art .set-tile.pack-art-tile .snm { display:none; }
body.hsc1-page .pack-art .set-tile.promo-tile .sn,
body.hsc1-page .pack-art .set-tile.promo-tile .snm { display:block !important; flex-basis:100%; width:100%; text-align:center; }
body.hsc1-page .pack-art .set-tile.promo-tile .snm { margin-top:4px; color:var(--ink); font:clamp(10px,1.4vw,13px)/1.4 'IBM Plex Mono',monospace; }
body.hsc1-page .pack-art .set-tile.promo-tile .sn { margin-top:6px; padding:0; border-left:0; background:none; color:var(--bronze-bright); font:clamp(9px,1.2vw,11px)/1.4 'IBM Plex Mono',monospace; }
/* while a promo slot is empty the shared uploader hangs its + Photo button
   BELOW the slot (absolute, top:100%) - clear it so the #000 / name lines
   are not painted over; once photos land the buttons go and so does this */
@media (min-width: 601px) {
  body.hsc1-page .pack-art .set-tile.promo-tile .ph-f:not(.has-img) ~ .sn,
  body.hsc1-page .pack-art .set-tile.promo-tile .ph-b:not(.has-img) ~ .sn { margin-top:56px; }
}

body.hsc1-page .first-print { max-width:1200px; margin-top:36px; }
body.hsc1-page .first-print-title {
  margin:0 0 12px;
  color:#8ed4cf;
  font-family:'Bungee Outline',sans-serif;
  font-size:22px;
  font-weight:400;
  letter-spacing:0.08em;
  line-height:1.3;
  text-align:center;
  text-transform:uppercase;
  -webkit-text-stroke:0.6px currentColor;
  text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 6px #8ed4cf,0 0 14px #8ed4cf,0 0 28px rgba(141,212,207,0.85),0 0 50px rgba(141,212,207,0.55),0 0 90px rgba(141,212,207,0.3);
}
body.hsc1-page .first-print-desc { max-width:780px; margin:0 auto 18px; color:var(--ink-dim); font:italic 14px/1.55 'Cormorant Garamond',serif; text-align:center; }
body.hsc1-page .first-print-grid.sets-grid {
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px;
  max-width:760px;
  margin:0 auto;
  padding:0;
}
body.hsc1-page .first-print-cell { display:flex; flex-direction:column; gap:10px; min-width:0; }
body.hsc1-page .first-print-cell .fp-tile { display:block !important; min-height:0 !important; padding:0 !important; border:0 !important; background:none !important; gap:0 !important; }
body.hsc1-page .first-print-cell .fp-tile .ph-f { display:block !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; aspect-ratio:1 !important; }
body.hsc1-page .first-print-cell .cap { margin-top:7px; color:var(--bronze-bright); font:700 9px/1.35 'IBM Plex Mono',monospace; letter-spacing:0.15em; text-align:center; text-transform:uppercase; }
body.hsc1-page .first-print-cell .sub { color:var(--ink-dim); font:italic 12px/1.4 'Cormorant Garamond',serif; text-align:center; }

body.hsc1-page .sticker-head { max-width:1200px; margin-top:48px; margin-bottom:18px; }
body.hsc1-page .sticker-head h2 { margin:0; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--bronze-bright); font:14px/1.4 'Cinzel',serif; letter-spacing:0.32em; text-transform:uppercase; }
body.hsc1-page .sticker-head .sh-sub { margin-top:6px; color:var(--ink-dim); font:10px/1.4 'IBM Plex Mono',monospace; letter-spacing:0.22em; text-transform:uppercase; }
body.hsc1-page .sets-wrap { max-width:1560px; padding-bottom:80px; }
body.hsc1-page .sets-wrap > .sets-grid,
body.hsc1-page .sticker-head + .sets-wrap .sets-grid,
body.hsc1-page .sticker-head .sets-grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 560px), 1fr)) !important;
  gap:10px;
}
/* Astryx card surface (matches super-dx-1998-astryx-card-system-v1):
   gradient plate, teal outline, bronze left accent, inset depth. */
body.hsc1-page .set-tile {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  min-height:160px;
  padding:10px 16px 10px 10px;
  border:1px solid rgba(109,181,176,0.34);
  background:
    linear-gradient(90deg, rgba(201,169,104,0.055), transparent 32%),
    linear-gradient(150deg, rgba(20,38,40,0.9), rgba(6,15,17,0.97));
  box-shadow:
    inset 3px 0 0 rgba(201,169,104,0.62),
    inset 0 1px 0 rgba(142,212,207,0.13),
    0 12px 30px rgba(0,0,0,0.2);
  position:relative;
  scroll-margin-top:100px;
  transition:all 0.2s ease;
}
body.hsc1-page .set-tile::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:3px;
  height:1px;
  background:linear-gradient(90deg, rgba(201,169,104,0.8), rgba(142,212,207,0.48), transparent 78%);
  pointer-events:none;
}
body.hsc1-page .set-tile:hover {
  border-color:rgba(142,212,207,0.58);
  background:
    linear-gradient(90deg, rgba(201,169,104,0.075), transparent 34%),
    linear-gradient(150deg, rgba(23,43,45,0.94), rgba(7,17,19,0.98));
  box-shadow:
    inset 3px 0 0 rgba(217,184,119,0.78),
    inset 0 1px 0 rgba(142,212,207,0.18),
    0 16px 36px rgba(0,0,0,0.26);
}
/* first-print tiles are bare images by design - no card chrome on them */
body.hsc1-page .first-print-cell .fp-tile { box-shadow:none !important; }
body.hsc1-page .first-print-cell .fp-tile::before { content:none !important; }
body.hsc1-page .set-tile .ph-f,
body.hsc1-page .set-tile .ph-b {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:140px;
  height:140px;
  border:1px solid rgba(109,181,176,0.33);
  background:rgba(4,11,13,0.8) center/contain no-repeat;
  box-shadow:inset 0 0 24px rgba(109,181,176,0.055), 0 1px 0 rgba(255,255,255,0.025);
  color:var(--ink-faint);
  cursor:zoom-in;
  font:11px/1.2 'IBM Plex Mono',monospace;
  letter-spacing:0.2em;
  text-transform:uppercase;
  transition:transform 0.25s cubic-bezier(0.25,1,0.5,1), border-color 0.2s ease, z-index 0s 0.05s;
}
body.hsc1-page .set-tile .ph-f:hover,
body.hsc1-page .set-tile .ph-b:hover { transform:scale(1.7); border-color:var(--teal-bright); z-index:10; transition-delay:0s; box-shadow:0 8px 28px rgba(0,0,0,0.75); }
body.hsc1-page .set-tile .sn { flex-shrink:0; min-width:42px; padding:4px 9px; border-left:2px solid var(--bronze-bright); background:rgba(201,169,104,0.1); color:var(--bronze-bright); font:11px/1.4 'IBM Plex Mono',monospace; letter-spacing:0.12em; }
body.hsc1-page .set-tile .snm { flex:1; min-width:0; color:#edf8f6; font:700 clamp(15px,1.5vw,18px)/1.3 'Cinzel',serif; letter-spacing:0.035em; overflow-wrap:break-word; word-break:keep-all; hyphens:none; }
body.hsc1-page .set-tile .sty { flex-shrink:0; color:var(--ink-faint); font:8px/1.35 'IBM Plex Mono',monospace; letter-spacing:0.12em; text-align:right; text-transform:uppercase; }
body.hsc1-page .set-tile .sty.holo { color:var(--teal-bright); }
body.hsc1-page .set-tile .sty.gold { color:var(--bronze-bright); }
body.hsc1-page .set-tile .sty.promo { color:var(--blood); }

body.hsc1-page .sets-wrap .set-tile .fp-col .ht-addphoto,
body.hsc1-page .first-print-cell .ht-addphoto,
body.hsc1-page .pack-art .ht-addphoto {
  box-sizing:border-box;
  min-width:0 !important;
  max-width:calc(100% - 6px) !important;
  min-height:34px;
  padding:5px 8px !important;
  white-space:normal !important;
  line-height:1.2 !important;
}
body.hsc1-page .sets-wrap .set-tile .fp-type-nonholo { color:var(--ink-dim); }
body.hsc1-page .sets-wrap .set-tile .fp-type-prism { color:var(--teal-bright); }
body.hsc1-page .sets-wrap .set-tile .fp-type-gold { color:var(--bronze-bright); }
body.hsc1-page .set-tile:target { border-color:var(--teal-bright); background:rgba(141,212,207,0.10); box-shadow:0 0 0 2px rgba(141,212,207,0.5); animation:hsc1-target-pulse 1.4s ease-out 2; }
@keyframes hsc1-target-pulse { 0% { box-shadow:0 0 0 0 rgba(141,212,207,0.7); } 100% { box-shadow:0 0 0 14px rgba(141,212,207,0); } }

body.hsc1-page footer { position:relative; z-index:2; padding:40px 32px 32px; border-top:1px solid var(--line); background:var(--bg-deeper); color:var(--ink-faint); font-size:10px; letter-spacing:0.1em; line-height:1.9; text-align:center; }
body.hsc1-page footer .mark { display:block; margin-bottom:12px; color:var(--bronze); font:11px/1.4 'Cinzel',serif; letter-spacing:0.4em; }

@media (max-width: 900px) {
  body.hsc1-page .set-grid,
  body.hsc1-page .set-grid-2,
  body.hsc1-page .set-grid-3,
  body.hsc1-page .set-grid-4,
  body.hsc1-page .set-grid-5,
  body.hsc1-page .set-grid-6 { grid-template-columns:1fr !important; max-width:700px; }
}

@media (max-width: 760px) {
  body.hsc1-page .page-head { padding:36px 16px 10px; }
  /* !important on purpose: the shared title fitter (htc-ornate-buttons.js)
     pins an inline white-space:nowrap on the H1, but mobile.css wins the
     font-size fight against its shrink loop, so on phones the un-shrunk
     one-line title overflowed the viewport (body scrollWidth 457 at 390).
     A page !important beats the non-important inline style and lets the
     title wrap instead of truncate - nothing on this page may be cut off. */
  body.hsc1-page .page-title { white-space:normal !important; }
  body.hsc1-page .set-desc,
  body.hsc1-page .first-print,
  body.hsc1-page .pack-art,
  body.hsc1-page .sticker-head,
  body.hsc1-page .sets-wrap { padding-left:12px; padding-right:12px; }
  body.hsc1-page .eyebrow { letter-spacing:0.22em; }
  body.hsc1-page .meta-badge { letter-spacing:0.12em; }
  body.hsc1-page .pack-art .sets-grid { grid-template-columns:1fr !important; max-width:360px; }
  body.hsc1-page .pack-art .set-tile.pack-art-tile .ph-f,
  body.hsc1-page .pack-art .set-tile.pack-art-tile .ph-b { height:clamp(128px,42vw,176px) !important; }
  body.hsc1-page .first-print-grid.sets-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important; max-width:420px; }
  body.hsc1-page .first-print-grid.sets-grid .first-print-cell .fp-tile {
    display:block !important;
    grid-template-columns:none !important;
    grid-template-areas:none !important;
    padding:0 !important;
  }
  body.hsc1-page .first-print-grid.sets-grid .first-print-cell .fp-tile .ph-f {
    width:100% !important;
    min-height:clamp(120px,38vw,176px) !important;
    aspect-ratio:1 !important;
  }
  body.hsc1-page .first-print-cell .cap { font-size:9px !important; letter-spacing:0.06em !important; }
  body.hsc1-page .first-print-cell .sub { font-size:11px !important; line-height:1.3 !important; }
  body.hsc1-page .sets-wrap > .sets-grid,
  body.hsc1-page .sticker-head .sets-grid { grid-template-columns:1fr !important; gap:12px !important; }
  body.hsc1-page .sticker-head .sets-grid .set-tile {
    flex-flow:row wrap !important;
    align-items:flex-start !important;
    justify-content:center !important;
    min-height:0 !important;
    gap:10px !important;
    padding:12px !important;
  }
  body.hsc1-page .sticker-head .sets-grid .set-tile .ph-f,
  body.hsc1-page .sticker-head .sets-grid .set-tile .ph-b {
    flex:1 1 calc(50% - 8px) !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    min-height:148px !important;
    aspect-ratio:5 / 6 !important;
  }
  body.hsc1-page .sticker-head .sets-grid .set-tile .sn,
  body.hsc1-page .sticker-head .sets-grid .set-tile .snm {
    flex:1 0 100% !important;
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
  }
  body.hsc1-page .sets-wrap .set-tile .fp-col .ht-addphoto,
  body.hsc1-page .first-print-cell .ht-addphoto,
  body.hsc1-page .pack-art .ht-addphoto { min-height:44px; font-size:10px !important; }
  body.hsc1-page .set-tile .ph-f:hover,
  body.hsc1-page .set-tile .ph-b:hover { transform:none; box-shadow:none; }
}

@media (max-width: 360px) {
  body.hsc1-page .set-desc,
  body.hsc1-page .first-print,
  body.hsc1-page .pack-art,
  body.hsc1-page .sticker-head,
  body.hsc1-page .sets-wrap { padding-left:8px; padding-right:8px; }
  body.hsc1-page .sets-wrap > .sets-grid,
  body.hsc1-page .sticker-head .sets-grid { padding-left:0 !important; padding-right:0 !important; }
  body.hsc1-page .sticker-head .sets-grid .set-tile .ph-f,
  body.hsc1-page .sticker-head .sets-grid .set-tile .ph-b { min-height:132px !important; }
}

@media (max-width: 760px) {
  body.hsc1-page .first-print .first-print-grid.sets-grid .first-print-cell > .set-tile.fp-tile {
    display:block !important;
    grid-template-columns:none !important;
    grid-template-areas:none !important;
    padding:0 !important;
    overflow:visible !important;
  }
  body.hsc1-page .first-print .first-print-grid.sets-grid .first-print-cell > .set-tile.fp-tile > .ph-f {
    display:block !important;
    grid-column:auto !important;
    order:0 !important;
    flex:none !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1 !important;
  }
}

/* =====================================================================
   HSC1 CHECKLIST — LOCKED PAGE-SCOPED LAYOUT (mobile first)
   ---------------------------------------------------------------------
   HSC1 is the only set whose checklist rows carry more than two photos:
     .fp3 = 1 front + 2 backs   (non-holo and gold rows)
     .fp4 = 2 fronts + 2 backs  (prism rows)
   Every other set is 1 front + 1 back, so the sitewide phone rules in
   assets/css/mobile.css assume a two-slot tile and force
     body .sets-wrap .sets-grid .set-tile:not(...)  ->  2-column grid
     body .sets-grid  .set-tile .ph-f               ->  width:calc(50% - 3px)
   Those selectors carry SEVEN classes, so the old
   `body.hsc1-page .sets-wrap .set-tile.fp3` rules (four classes) lost the
   cascade and the slots collapsed to ~42-53px on a phone. That is the
   regression this page kept suffering.

   THE LOCK: everything below is keyed off the #hsc1-checklist ID on this
   page's <section class="sets-wrap">. An ID outranks any number of classes,
   so no future sitewide rule can silently take this layout back. Keep the
   ID on the section and keep these rules in THIS file only - do not move
   them into mobile.css / ht-set-grid.css, and do not drop the ID.

   Phone target (Chris's spec, 2026-08):
     - ALL of an item's photo slots sit in ONE row - never a second row
     - the FRONT slot is LARGER than the back slots (wider fr share)
     - fr units: same composition scaled at every phone width, 320-428
     - item name >= 16px, +Photo button >= 44px tall
     - names WRAP on word boundaries; never ellipsis, never mid-word split
   ===================================================================== */

/* ---- container ------------------------------------------------------ */
#hsc1-checklist { position:relative; z-index:2; }
#hsc1-checklist > .sets-grid {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  align-items:start !important;
  padding:0 !important;
  margin:0 !important;
}

/* ---- the row ("item") ----------------------------------------------- */
/* ONE photo strip per item on a phone (Chris's spec): the tile is a single
   column - the photo strip on top, the item details underneath - and the
   strip itself is one grid row holding EVERY slot of the item. The front
   column(s) get a wider fr share than the back columns, so the front photo
   reads larger and the backs smaller, and nothing ever wraps to a second
   row of photos. Fr units scale the same composition at every phone width. */
#hsc1-checklist .set-tile.fp3,
#hsc1-checklist .set-tile.fp4 {
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:none !important;
  grid-template-areas:none !important;
  grid-auto-rows:auto !important;
  align-items:start !important;
  align-content:start !important;
  justify-items:stretch !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:12px !important;
  overflow:visible !important;
  position:relative !important;
}

/* the photo strip: all slots side by side in one row, front larger */
#hsc1-checklist .set-tile.fp3 > .fp-cols,
#hsc1-checklist .set-tile.fp4 > .fp-cols {
  display:grid !important;
  width:100% !important;
  min-width:0 !important;
  align-items:start !important;
  gap:clamp(5px, 1.8vw, 10px) !important;
}
/* fp3 = front + 2 backs */
#hsc1-checklist .set-tile.fp3 > .fp-cols { grid-template-columns:1.55fr 1fr 1fr !important; }
/* fp4 = 2 fronts + 2 backs (prisms) */
#hsc1-checklist .set-tile.fp4 > .fp-cols { grid-template-columns:1.3fr 1.3fr 1fr 1fr !important; }

/* ---- one photo column ----------------------------------------------- */
#hsc1-checklist .set-tile .fp-col {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  order:0 !important;
  gap:6px !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* ---- the sticker photo (THE item photo - this is what must be big) --- */
#hsc1-checklist .set-tile .fp-col .ph-f,
#hsc1-checklist .set-tile .fp-col .ph-b {
  display:flex !important;
  order:0 !important;
  flex:none !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  margin:0 !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border:1px solid rgba(109,181,176,0.33) !important;
  background-color:rgba(4,11,13,0.8) !important;
  box-shadow:inset 0 0 24px rgba(109,181,176,0.055), 0 1px 0 rgba(255,255,255,0.025) !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  cursor:zoom-in !important;
}
/* empty slots keep the same box so rows never jump as photos land */
#hsc1-checklist .set-tile .fp-col .ph-f:not(.has-img),
#hsc1-checklist .set-tile .fp-col .ph-b:not(.has-img) {
  align-items:center !important;
  justify-content:center !important;
  padding:6px !important;
  margin:0 !important;
}
/* The shared uploader hangs .ht-addphoto BELOW its slot (position:absolute;
   top:100%), but these slots are overflow:hidden - that combination clipped
   the button invisible. In the checklist the button flows INSIDE the slot
   instead: the slot is a centering flexbox, so a static button sits centered
   in the empty square as a full-width tap target. */
#hsc1-checklist .set-tile .fp-col .ht-addphoto {
  box-sizing:border-box !important;
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:44px !important;
  padding:8px 4px !important;
  font-size:clamp(10px, 3.2vw, 13px) !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

/* ---- the slot caption ("Front", "1st Back", "2nd Front"...) --------- */
#hsc1-checklist .set-tile .fp-cl {
  display:block !important;
  order:1 !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--ink-dim) !important;
  font:600 clamp(9px, 2.8vw, 13px)/1.25 'IBM Plex Mono',monospace !important;
  letter-spacing:0.06em !important;
  text-align:center !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  text-overflow:clip !important;
}

/* ---- item details (number + name + finish) -------------------------- */
#hsc1-checklist .set-tile .fp-meta {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  order:0 !important;
  gap:6px !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  container-type:normal !important;
  overflow:visible !important;
}
/* details span the full width under the one-row photo strip; the right
   padding reserves the corner where the absolute anvil toggle sits */
#hsc1-checklist .set-tile.fp3 .fp-meta,
#hsc1-checklist .set-tile.fp4 .fp-meta {
  grid-column:1 / -1 !important;
  flex-flow:row wrap !important;
  align-items:baseline !important;
  justify-content:flex-start !important;
  gap:6px 14px !important;
  min-height:44px !important;
  padding-right:54px !important;
}

#hsc1-checklist .set-tile .fp-nl {
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:baseline !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  gap:4px 8px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  white-space:normal !important;
  text-align:left !important;
}
#hsc1-checklist .set-tile .fp-nl .sn {
  flex:none !important;
  align-self:center !important;
  min-width:0 !important;
  margin:0 !important;
  padding:4px 9px !important;
  border-left:2px solid var(--bronze-bright) !important;
  background:rgba(201,169,104,0.1) !important;
  color:var(--bronze-bright) !important;
  font:12px/1.3 'IBM Plex Mono',monospace !important;
  letter-spacing:0.12em !important;
  white-space:nowrap !important;
}
/* item name: wraps on word boundaries, never ellipsised, never split
   mid-word (house rule: no "Jigglypu / ff") */
#hsc1-checklist .set-tile .fp-nl .snm {
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  color:#edf8f6 !important;
  font-family:'Cinzel',serif !important;
  font-size:clamp(16px, 4.4vw, 19px) !important;
  font-weight:700 !important;
  letter-spacing:0.035em !important;
  line-height:1.25 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}
#hsc1-checklist .set-tile .fp-type {
  display:block !important;
  position:static !important;
  align-self:center !important;
  flex:none !important;
  max-width:100% !important;
  margin:0 !important;
  padding:4px 8px !important;
  border:1px solid rgba(109,181,176,0.22) !important;
  background:rgba(109,181,176,0.055) !important;
  font:13px/1.3 'IBM Plex Mono',monospace !important;
  letter-spacing:0.12em !important;
  text-align:left !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
/* chip tint follows the finish */
#hsc1-checklist .set-tile .fp-type-prism {
  border-color:rgba(142,212,207,0.32) !important;
  background:rgba(142,212,207,0.06) !important;
}
#hsc1-checklist .set-tile .fp-type-gold {
  border-color:rgba(201,169,104,0.38) !important;
  background:rgba(201,169,104,0.08) !important;
}

/* ---- anvil ("add to collection") control ---------------------------- */
#hsc1-checklist .set-tile.fp3 > .anvil-ctl,
#hsc1-checklist .set-tile.fp4 > .anvil-ctl {
  grid-column:1 / -1 !important;
  position:static !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
#hsc1-checklist .set-tile.fp3 > .anvil-ctl.open,
#hsc1-checklist .set-tile.fp4 > .anvil-ctl.open,
#hsc1-checklist .set-tile.fp3 > .anvil-ctl.ht-open,
#hsc1-checklist .set-tile.fp4 > .anvil-ctl.ht-open { height:auto !important; }
#hsc1-checklist .set-tile .anvil-toggle.anvil-img {
  position:absolute !important;
  right:10px !important;
  bottom:10px !important;
  width:44px !important;
  max-width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:7px !important;
  border:0 !important;
  background:transparent !important;
  z-index:6 !important;
}
#hsc1-checklist .set-tile > .anvil-ctl .anvil-fields,
#hsc1-checklist .set-tile > .anvil-ctl select,
#hsc1-checklist .set-tile > .anvil-ctl button {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
#hsc1-checklist .set-tile > .anvil-ctl .anvil-btn { min-height:44px !important; }

/* 601-760px: the shared anvil stylesheet collapses closed .anvil-fields only
   at <=600px, and this file's desktop rules only take over at >=761px - in
   the band between, the closed control's 100%-wide fields painted over the
   next row and pushed 28px past the viewport. Mirror the shared collapse. */
@media (min-width: 601px) and (max-width: 760px) {
  #hsc1-checklist .set-tile > .anvil-ctl:not(.open):not(.ht-open) .anvil-fields {
    max-height:0 !important;
    overflow:hidden !important;
    margin-top:0 !important;
    padding-top:0 !important;
  }
}

/* phone: hover-zoom off (it is a tap surface, not a pointer surface) */
@media (hover: none) {
  #hsc1-checklist .set-tile .ph-f:hover,
  #hsc1-checklist .set-tile .ph-b:hover { transform:none !important; box-shadow:none !important; }
}

/* ---- 320px: keep 2-across, just tighten the chrome ------------------ */
@media (max-width: 360px) {
  #hsc1-checklist .set-tile.fp3,
  #hsc1-checklist .set-tile.fp4 { padding:10px !important; gap:10px !important; }
  #hsc1-checklist .set-tile .anvil-toggle.anvil-img { right:8px !important; bottom:8px !important; }
}

/* ---- desktop / tablet: back to one row of real columns -------------- */
@media (min-width: 761px) {
  #hsc1-checklist > .sets-grid {
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 560px), 1fr)) !important;
    gap:10px !important;
  }
  #hsc1-checklist .set-tile.fp3,
  #hsc1-checklist .set-tile.fp4 {
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:16px !important;
  }
  #hsc1-checklist .set-tile.fp3 > .fp-cols,
  #hsc1-checklist .set-tile.fp4 > .fp-cols {
    display:grid !important;
    width:100% !important;
    max-width:none !important;
    align-items:start !important;
    gap:12px !important;
  }
  #hsc1-checklist .set-tile.fp3 > .fp-cols { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
  #hsc1-checklist .set-tile.fp4 > .fp-cols { grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
  #hsc1-checklist .set-tile.fp3 .fp-meta,
  #hsc1-checklist .set-tile.fp4 .fp-meta {
    grid-column:auto !important;
    flex-flow:row wrap !important;
    align-items:baseline !important;
    gap:6px 16px !important;
    min-height:44px !important;
    padding:0 54px 0 0 !important;
  }
  #hsc1-checklist .set-tile .fp-nl .snm { font-size:20px !important; }
  #hsc1-checklist .set-tile .fp-cl { font-size:13px !important; }
  #hsc1-checklist .set-tile .anvil-toggle.anvil-img { right:16px !important; bottom:16px !important; }
  /* pointer widths keep the anvil control as an inline row, but it has to stay
     inside the row box - full-width children pushed it past the viewport */
  #hsc1-checklist .set-tile.fp3 > .anvil-ctl,
  #hsc1-checklist .set-tile.fp4 > .anvil-ctl {
    flex-flow:row wrap !important;
    align-items:center !important;
    height:auto !important;
    gap:8px !important;
  }
  #hsc1-checklist .set-tile > .anvil-ctl .anvil-fields {
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:center !important;
    flex:1 1 auto !important;
    width:auto !important;
    max-width:100% !important;
    gap:8px !important;
  }
  #hsc1-checklist .set-tile > .anvil-ctl select,
  #hsc1-checklist .set-tile > .anvil-ctl button {
    width:auto !important;
    max-width:100% !important;
  }
}

/* ======================================================================
   CONTRIBUTOR CREDIT ON PHOTOS
   ----------------------------------------------------------------------
   The painter moves HSC1 credits into the .fp-col flow, after the photo
   caption. The credit remains visible and tappable without painting over
   any part of the contributed sticker.
   ====================================================================== */
#hsc1-checklist .set-tile .fp-col > .ht-credit.ht-credit-flow {
  display:block !important;
  order:2 !important;
  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  margin:3px 0 0 !important;
  padding:0 2px !important;
  background:none !important;
  color:#d6e2e0 !important;
  font:500 13px/1.25 'IBM Plex Mono',monospace !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-decoration:none !important;
  text-transform:none !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:none !important;
  pointer-events:auto !important;
}
#hsc1-checklist .set-tile .fp-col > .ht-credit.ht-credit-flow:hover,
#hsc1-checklist .set-tile .fp-col > .ht-credit.ht-credit-flow:focus-visible {
  color:#ffffff !important;
  text-decoration:underline !important;
}

@media (max-width: 760px) {
  #hsc1-checklist .set-tile .fp-col > .ht-credit.ht-credit-flow {
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    /* fluid: at 13px fixed, "HiddenTemple" split mid-word in the narrow
       back columns of the one-row strip; ~11px at 390 keeps it whole */
    font-size:clamp(10px, 2.9vw, 13px) !important;
    line-height:1.2 !important;
  }
}

/* ======================================================================
   HSC1-PRODUCT-COMPRESS - compact pack-art + print-box area on mobile
   (fix/hsc1-product-compress)
   ----------------------------------------------------------------------
   On phones the Pack Art pair used to stack (1 col) and the four 1st/2nd
   print boxes sat in a 2x2 grid - together they pushed the checklist far
   down the page. Below, each group collapses to a SINGLE non-wrapping
   flex row of shrink-to-fit tiles (flex:1 1 0; min-width:0) and the photo
   wells shrink, so the whole product block is a few hundred px tall.
   Tap/zoom still opens full detail. Strictly scoped to .pack-art and
   .first-print - #hsc1-checklist, the credits and the footer are left
   exactly as they are, and desktop (>=761px) keeps its existing 2-up
   pack row / 4-up print row.
   ====================================================================== */
@media (max-width: 760px) {
  /* ---- Pack Art: the two tiles side by side (was a 1-col stack) ---- */
  body.hsc1-page .pack-art .sets-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: clamp(6px, 2vw, 14px) !important;
    max-width: 520px !important;
  }
  body.hsc1-page .pack-art .sets-grid > .set-tile.pack-art-tile {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: clamp(6px, 1.6vw, 12px) !important;
  }
  /* shorter wells - two per tile, no longer 128-176px tall */
  body.hsc1-page .pack-art .set-tile.pack-art-tile .ph-f,
  body.hsc1-page .pack-art .set-tile.pack-art-tile .ph-b {
    height: clamp(52px, 17vw, 104px) !important;
    max-width: none !important;
  }

  /* ---- First print: the four boxes in ONE row (was 2x2) ---- */
  body.hsc1-page .first-print-grid.sets-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: clamp(5px, 1.6vw, 12px) !important;
    max-width: 520px !important;
  }
  body.hsc1-page .first-print-grid.sets-grid > .first-print-cell {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 5px !important;
  }
  /* the design ships .sn/.snm hidden here; keep them hidden so a shared
     rule cannot reveal a big serif name and blow up the narrow column */
  body.hsc1-page .first-print-grid.sets-grid .first-print-cell .set-tile.fp-tile .sn,
  body.hsc1-page .first-print-grid.sets-grid .first-print-cell .set-tile.fp-tile .snm {
    display: none !important;
  }
  /* caption + blurb shrink to sit under a ~70px box without ballooning */
  body.hsc1-page .first-print-cell .cap {
    margin-top: 5px !important;
    font-size: 8px !important;
    letter-spacing: 0.03em !important;
  }
  body.hsc1-page .first-print-cell .sub {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

/* Top product / print-box / pack-art tiles are reference images, not checklist
   entries — hide the like button there (those items are liked in the set list below).
   Also clears the credit-vs-heart overlap on wider screens. */
body.hsc1-page .first-print .ht-like-row,
body.hsc1-page .pack-art .ht-like-row,
body.hsc1-page .set-tile:not(#hsc1-checklist .set-tile) .ht-like-row{ display:none !important; }

/* ===================================================================== */
/* HSC1 TOP-PRODUCT REBUILD 2026-08-04 — uniform square wells, compact,   */
/* fluid. ID-anchored (#hsc1-packart / #hsc1-firstprint / #hsc1-products) */
/* so they outrank mobile.css's :not() phone rules at EVERY width. Every  */
/* well is an equal square; the async-injected uploader credit and the    */
/* +Photo button get a reserved gap so nothing overlaps the labels.       */
/* ===================================================================== */
body.hsc1-page #hsc1-packart,
body.hsc1-page #hsc1-firstprint,
body.hsc1-page #hsc1-products{
  max-width:700px !important; margin-left:auto !important; margin-right:auto !important;
  padding-left:14px !important; padding-right:14px !important;
}
/* ---- PACK ART + PRODUCT SHOTS: 2 tiles/row, each = 2 equal square wells ---- */
body.hsc1-page #hsc1-packart .sets-grid,
body.hsc1-page #hsc1-products .sets-grid{
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:clamp(10px,2.6vw,20px) !important;
  max-width:660px !important; margin:0 auto !important; padding:0 !important;
}
body.hsc1-page #hsc1-packart .set-tile,
body.hsc1-page #hsc1-products .set-tile{
  display:grid !important; grid-template-columns:1fr 1fr !important;
  column-gap:clamp(5px,1.5vw,10px) !important; row-gap:0 !important;
  align-content:start !important; align-items:start !important; justify-items:stretch !important;
  min-height:0 !important; padding:clamp(7px,1.8vw,12px) !important;
}
body.hsc1-page #hsc1-packart .set-tile > .ph-f,
body.hsc1-page #hsc1-packart .set-tile > .ph-b,
body.hsc1-page #hsc1-products .set-tile > .ph-f,
body.hsc1-page #hsc1-products .set-tile > .ph-b{
  grid-row:1 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; height:auto !important; aspect-ratio:1 !important;
  max-width:none !important; min-width:0 !important; min-height:0 !important;
  margin:0 0 34px !important; overflow:visible !important;
}
body.hsc1-page #hsc1-packart .set-tile > .ph-f,
body.hsc1-page #hsc1-products .set-tile > .ph-f{ grid-column:1 !important; }
body.hsc1-page #hsc1-packart .set-tile > .ph-b,
body.hsc1-page #hsc1-products .set-tile > .ph-b{ grid-column:2 !important; }
body.hsc1-page #hsc1-packart .set-tile > .sn,
body.hsc1-page #hsc1-packart .set-tile > .snm,
body.hsc1-page #hsc1-products .set-tile > .sn,
body.hsc1-page #hsc1-products .set-tile > .snm{
  display:block !important; grid-column:1 / -1 !important; grid-row:auto !important;
  width:100% !important; min-width:0 !important; margin:0 !important;
  padding:0 !important; border:0 !important; background:none !important; text-align:center !important;
}
body.hsc1-page #hsc1-packart .set-tile > .sn,
body.hsc1-page #hsc1-products .set-tile > .sn{
  margin-top:2px !important; color:var(--bronze-bright) !important; letter-spacing:0.1em !important;
  font:clamp(8px,1.5vw,10px)/1.3 'IBM Plex Mono',monospace !important;
}
body.hsc1-page #hsc1-packart .set-tile > .snm,
body.hsc1-page #hsc1-products .set-tile > .snm{
  margin-top:3px !important; color:var(--ink) !important; letter-spacing:0.02em !important;
  font:clamp(11px,1.7vw,14px)/1.3 'Cinzel',serif !important;
}
/* ---- FIRST PRINT: 4 tiles/row, each = 1 square well + label ---- */
body.hsc1-page #hsc1-firstprint .first-print-grid.sets-grid{
  display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:clamp(6px,1.8vw,14px) !important;
  max-width:660px !important; margin:0 auto !important; padding:0 !important;
}
body.hsc1-page #hsc1-firstprint .first-print-cell{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:0 !important; min-width:0 !important;
}
body.hsc1-page #hsc1-firstprint .first-print-cell > .fp-tile{
  display:block !important; width:100% !important; min-height:0 !important;
  padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important;
}
body.hsc1-page #hsc1-firstprint .first-print-cell > .fp-tile > .ph-f{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; height:auto !important; aspect-ratio:1 !important;
  min-height:0 !important; max-width:none !important;
  margin:0 0 34px !important; overflow:visible !important;
}
body.hsc1-page #hsc1-firstprint .first-print-cell > .cap{
  margin:0 !important; color:var(--bronze-bright) !important; text-align:center !important;
  letter-spacing:0.06em !important; text-transform:uppercase !important;
  font:700 clamp(7px,1.5vw,9px)/1.3 'IBM Plex Mono',monospace !important;
}
body.hsc1-page #hsc1-firstprint .first-print-cell > .sub{
  margin-top:3px !important; color:var(--ink-dim) !important; text-align:center !important;
  font:italic clamp(9px,1.5vw,12px)/1.35 'Cormorant Garamond',serif !important;
}
/* ---- compact +Photo prompt + smaller credit on the dense top thumbnails ---- */
body.hsc1-page #hsc1-packart .ht-addphoto,
body.hsc1-page #hsc1-firstprint .ht-addphoto,
body.hsc1-page #hsc1-products .ht-addphoto{
  min-height:0 !important; min-width:0 !important; max-width:none !important;
  padding:3px 6px !important; line-height:1.2 !important; white-space:nowrap !important;
  font-size:clamp(8px,2vw,10px) !important;
}
body.hsc1-page #hsc1-packart .ht-credit,
body.hsc1-page #hsc1-firstprint .ht-credit,
body.hsc1-page #hsc1-products .ht-credit{ font-size:clamp(8px,1.6vw,11px) !important; }
/* ---- phones: drop first-print flavor text so tiles stay compact + uniform ---- */
@media (max-width:560px){
  body.hsc1-page #hsc1-firstprint .first-print-cell > .sub{ display:none !important; }
}
/* ===================================================================== */