/* Public navigation placement and spacing refinements. */

/* Desktop logged-out: add breathing room between the three controls and below the summary row. */
@media (min-width:781px){
  #result .card .thumb > .ccc-public-thumb-nav{
    gap:16px !important;
    margin:20px 0 20px !important;
  }

  html body #result .card .thumb > .ccc-public-thumb-nav #setChecklistBtn,
  html body #result .card .thumb > .ccc-public-thumb-nav #backToSetBtn,
  html body #result .card .thumb > .ccc-public-thumb-nav #nextComicCutBtn{
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
  }

  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-out-layout > .ccc-desktop-summary-actions,
  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-in-layout > .ccc-desktop-summary-actions{
    padding-bottom:28px !important;
  }

  /* Logged-in desktop: add breathing room above Owner / Comic Book Issue / Card Number. */
  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-in-layout > .ccc-desktop-summary-actions{
    padding-top:28px !important;
  }
}

/* Mobile logged-out: mirror the public desktop placement without changing logged-in mobile. */
@media (max-width:780px){
  .searchwrap > #publicEbayTopBtn.icon-btn[hidden]{
    display:none !important;
  }

  .searchwrap > #publicEbayTopBtn.icon-btn:not([hidden]){
    appearance:none !important;
    -webkit-appearance:none !important;
    box-sizing:border-box !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    padding:10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:var(--panel) !important;
    color:var(--text) !important;
    box-shadow:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  .searchwrap > #publicEbayTopBtn.icon-btn:hover,
  .searchwrap > #publicEbayTopBtn.icon-btn:focus-visible{
    border-color:rgba(255,255,255,.6) !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    outline:none !important;
  }

  .searchwrap > #publicEbayTopBtn.icon-btn .material-symbols-outlined{
    font-size:22px !important;
    line-height:1 !important;
  }

  #result .card .card-main > .ccc-public-mobile-value-nav-panels{
    box-sizing:border-box !important;
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    margin:10px 0 0 !important;
  }

  #result .card .card-main > .ccc-public-mobile-value-nav-panels > .ccc-public-mobile-highlights{
    box-sizing:border-box !important;
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(3,44px) !important;
    grid-template-rows:44px !important;
    align-items:center !important;
    justify-content:start !important;
    gap:4px !important;
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
    margin:16px 0 14px !important;
    padding:0 !important;
    overflow:visible !important;
  }

  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile > #comicCutNav.comic-cut-nav.is-visible{
    display:contents !important;
  }

  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile > #comicCutNav.comic-cut-nav:not(.is-visible),
  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #comicCutNavCounters{
    display:none !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #setChecklistBtn,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #backToSetBtn,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #nextComicCutBtn{
    appearance:none !important;
    -webkit-appearance:none !important;
    box-sizing:border-box !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    margin:0 !important;
    padding:10px !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:var(--panel) !important;
    color:var(--text) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    opacity:1 !important;
    cursor:pointer !important;
    transform:none !important;
  }

  /* Logged-out mobile order only: Previous, Checklist, Next. */
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #backToSetBtn{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #setChecklistBtn{
    grid-column:2 !important;
    grid-row:1 !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #nextComicCutBtn{
    grid-column:3 !important;
    grid-row:1 !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #setChecklistBtn::before,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #setChecklistBtn::after,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #backToSetBtn::before,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #backToSetBtn::after,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #nextComicCutBtn::before,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #nextComicCutBtn::after{
    content:none !important;
    display:none !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile .material-symbols-outlined{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:inherit !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #setChecklistBtn:hover:not(:disabled),
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #setChecklistBtn:focus-visible,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #backToSetBtn:hover:not(:disabled),
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #backToSetBtn:focus-visible,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #nextComicCutBtn:hover:not(:disabled),
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile #nextComicCutBtn:focus-visible{
    border-color:rgba(255,255,255,.6) !important;
    background:rgba(255,255,255,.08) !important;
    box-shadow:none !important;
    outline:none !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile button:disabled,
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile button[aria-disabled="true"],
  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile button.is-disabled{
    border-color:rgba(180,184,196,.16) !important;
    background:rgba(112,116,128,.14) !important;
    color:rgba(188,192,204,.42) !important;
    box-shadow:none !important;
    opacity:1 !important;
    filter:grayscale(1) !important;
    cursor:not-allowed !important;
    pointer-events:none !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile .ccc-main-action-circle{
    display:contents !important;
  }

  html body #result .card.ccc-public-mobile-card > .thumb > .ccc-public-thumb-nav--mobile .ccc-main-action-label{
    display:none !important;
  }
}

/* Logged-out mobile: restore the desktop-style status/value badge beneath the image. */
@media (max-width:780px){
  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-mobile-counter-slot{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
    min-height:26px !important;
    margin:12px 0 0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-mobile-counter-slot > .comic-cut-nav-counters{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
    gap:5px !important;
    margin:0 !important;
  }

  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-mobile-counter-slot > .comic-cut-nav-counters[hidden]{
    display:none !important;
  }

  #result .card.ccc-public-mobile-card > .thumb > .ccc-public-mobile-counter-slot .comic-cut-nav-counter{
    box-sizing:border-box !important;
    max-width:140px !important;
    white-space:normal !important;
    text-align:center !important;
    line-height:1.2 !important;
  }
}