/* Homepage browse/action buttons.
   Match the exact mobile full-detail Previous / Checklist / Next action style,
   but keep four equal actions on the Home page at every viewport size. */
.home-browse-actions{
  box-sizing:border-box !important;
  width:min(680px, 100%) !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:32px auto 8px !important;
  padding:0 2px !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  align-items:start !important;
  justify-items:stretch !important;
  column-gap:4px !important;
  row-gap:0 !important;
  overflow:visible !important;
}

html body .home-browse-actions > .home-browse-action-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:86px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 1px !important;
  border:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--text) !important;
  box-shadow:none !important;
  opacity:1 !important;
  overflow:visible !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:normal !important;
  cursor:pointer !important;
  transform:none !important;
  transition:none !important;
  font:inherit !important;
  outline:none !important;
}

html body .home-browse-actions .home-browse-action-circle,
html body .home-browse-actions .ccc-main-action-circle{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 56px !important;
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  max-width:56px !important;
  max-height:56px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.075) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transform:none !important;
  transition:border-color .15s ease, background .15s ease !important;
}

html body .home-browse-actions .home-browse-action-circle .material-symbols-outlined,
html body .home-browse-actions .ccc-main-action-circle .material-symbols-outlined{
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:inherit !important;
  font-size:27px !important;
  line-height:1 !important;
}

html body .home-browse-actions .home-browse-action-label,
html body .home-browse-actions .ccc-main-action-label{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:2.2em !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--text) !important;
  font-size:11px !important;
  font-weight:650 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

html body .home-browse-actions .home-browse-action-label > span,
html body .home-browse-actions .ccc-main-action-label > span{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

html body .home-browse-actions .home-browse-action-label > .home-responsive-action-text,
html body .home-browse-actions .ccc-main-action-label > .home-responsive-action-text{
  white-space:nowrap !important;
}
html body .home-browse-actions .home-responsive-action-text > .home-action-word{
  display:inline !important;
}
html body .home-browse-actions .home-responsive-action-text > .home-action-word + .home-action-word::before{
  content:" " !important;
}

html body .home-browse-actions > .home-browse-action-btn:hover:not(:disabled),
html body .home-browse-actions > .home-browse-action-btn:focus-visible,
html body .home-browse-actions > .home-browse-action-btn:active{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  transform:none !important;
}

html body .home-browse-actions > .home-browse-action-btn:hover:not(:disabled) .home-browse-action-circle,
html body .home-browse-actions > .home-browse-action-btn:focus-visible .home-browse-action-circle,
html body .home-browse-actions > .home-browse-action-btn:active .home-browse-action-circle{
  border-color:rgba(255,255,255,.5) !important;
  background:rgba(255,255,255,.12) !important;
}

/* Logged-out Price Guide: same action geometry, muted exactly at the icon/label level. */
html body .home-browse-actions > .home-browse-action-btn:disabled,
html body .home-browse-actions > .home-browse-action-btn[aria-disabled="true"],
html body .home-browse-actions > .home-browse-action-btn.is-home-disabled{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  cursor:default !important;
  pointer-events:none !important;
}
html body .home-browse-actions > .home-browse-action-btn:disabled .home-browse-action-circle,
html body .home-browse-actions > .home-browse-action-btn[aria-disabled="true"] .home-browse-action-circle,
html body .home-browse-actions > .home-browse-action-btn.is-home-disabled .home-browse-action-circle{
  border-color:rgba(180,184,196,.16) !important;
  background:rgba(112,116,128,.14) !important;
  color:rgba(188,192,204,.42) !important;
  filter:grayscale(1) !important;
}
html body .home-browse-actions > .home-browse-action-btn:disabled .home-browse-action-label,
html body .home-browse-actions > .home-browse-action-btn[aria-disabled="true"] .home-browse-action-label,
html body .home-browse-actions > .home-browse-action-btn.is-home-disabled .home-browse-action-label,
html body .home-browse-actions > .home-browse-action-btn:disabled .material-symbols-outlined,
html body .home-browse-actions > .home-browse-action-btn[aria-disabled="true"] .material-symbols-outlined,
html body .home-browse-actions > .home-browse-action-btn.is-home-disabled .material-symbols-outlined{
  color:rgba(188,192,204,.42) !important;
  opacity:1 !important;
}

/* Browse by Comic Book: reuse the exact Checklist -> Comic Books mini grid.
   Each series uses a normal .mini-row cover tile, with the title/count below it. */
.ccc-comic-book-alpha-section{
  margin:0 0 26px;
}
.ccc-comic-book-alpha-heading{
  margin:0 0 10px;
  padding:0 2px 7px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-size:18px;
  font-weight:800;
  line-height:1;
}
.ccc-comic-book-browser-page .ccc-comic-book-series-grid{
  /* .mini-results owns the actual responsive grid dimensions. */
  margin-top:0;
  align-items:start;
}
.ccc-comic-book-series-item{
  min-width:0;
  width:100%;
}
a.ccc-comic-book-series.mini-row{
  display:grid;
  width:100%;
  aspect-ratio:3 / 4;
  margin:0;
  color:inherit;
  text-decoration:none;
}
a.ccc-comic-book-series.mini-row .mini-tile-img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.ccc-comic-book-series-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.04);
  color:var(--muted);
}
.ccc-comic-book-series-placeholder .material-symbols-outlined{
  font-size:30px;
  opacity:.75;
}
.ccc-comic-book-series-name{
  margin-top:6px;
  padding:0 2px;
  min-height:2.5em;
  color:var(--text);
  font-size:11px;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.ccc-comic-book-series-meta{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.2;
  text-align:center;
}

@media (max-width:780px){
  html body .home-browse-actions .home-browse-action-label > .home-responsive-action-text,
  html body .home-browse-actions .ccc-main-action-label > .home-responsive-action-text{white-space:normal !important;}
  html body .home-browse-actions .home-responsive-action-text > .home-action-word{display:block !important;}
  html body .home-browse-actions .home-responsive-action-text > .home-action-word + .home-action-word::before{content:none !important;}
}

@media (max-width:520px){
  .home-browse-actions{
    width:100% !important;
  }
  .ccc-comic-book-alpha-section{ margin-bottom:22px; }
  .ccc-comic-book-alpha-heading{ font-size:16px; margin-bottom:9px; }
  .ccc-comic-book-series-name{
    margin-top:5px;
    font-size:10px;
    line-height:1.2;
  }
  .ccc-comic-book-series-meta{
    margin-top:2px;
    font-size:9px;
  }
}

/* Mobile Browse by Comic Book intentionally inherits the exact Checklist
   .mini-results / .mini-row sizing. Do not override columns, gap, radius,
   aspect ratio, or image dimensions here. */
@media (max-width:780px), (hover:none) and (pointer:coarse){
  .ccc-comic-book-browser-page .ccc-comic-book-series-grid > .ccc-comic-book-series.mini-row{
    min-width:0;
  }
}


/* Mobile Browse by Comic Book: desktop grouping/behavior, fixed 3 issue covers per row. */
@media (max-width:780px){
  .ccc-comic-book-browser-page .ccc-mobile-comic-series-block{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .ccc-comic-book-browser-page .ccc-mobile-comic-series-title{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
  .ccc-comic-book-browser-page .ccc-mobile-comic-issue-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  .ccc-comic-book-browser-page .ccc-mobile-comic-issue-grid > .ccc-mobile-comic-issue-tile{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:8px !important;
  }
  .ccc-comic-book-browser-page .ccc-mobile-comic-issue-tile > img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:3/4 !important;
    object-fit:cover !important;
    margin:0 !important;
  }
}