/* Lookimg 2026 — listings, profiles, albums.
   Layout-neutral: frames are drawn with ::after overlays / box-shadows so
   Peafowl's JS-computed card sizes never change. */

/* ---------- Polaroid cards ---------- */
html[class] .list-item {
  background: var(--lk-white);
}
html[class] .list-item .list-item-image {
  background: var(--lk-soft);
}
/* ink frame + white matte, drawn over the image edge */
html[class] .list-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--lk-ink);
  box-shadow: inset 0 0 0 5px var(--lk-white);
  pointer-events: none;
  z-index: 3;
}
html[class] .list-item:hover::after {
  box-shadow: inset 0 0 0 5px var(--lk-lime);
}

/* caption strip (always visible, readable) */
html[class] .list-item .list-item-desc {
  opacity: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  padding: 8px 64px 9px 12px;
  background: var(--lk-white);
  border-top: 3px solid var(--lk-ink);
  text-shadow: none;
  box-shadow: none;
  color: var(--lk-ink);
  z-index: 2;
  box-sizing: border-box;
}
html[class] .list-item .list-item-desc-title-link,
html[class] .list-item .list-item-desc-title-link:hover {
  font-family: var(--lk-hand);
  font-size: 18px;
  line-height: 1.15;
  color: var(--lk-ink);
  text-shadow: none;
  font-weight: 400;
}
html[class] .list-item .list-item-from,
html[class] .list-item .list-item-from a {
  font-family: var(--lk-sans);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--lk-muted);
  text-shadow: none;
  margin-top: 2px;
}
html[class] .list-item .list-item-from a:hover { color: var(--lk-ink); text-decoration: underline; }

/* hover tools → sticker chips; keep them above the caption + frame */
html[class] .list-item .list-item-image-tools {
  text-shadow: none;
  z-index: 4;
}
html[class] .list-item .list-item-image-tools.--bottom.--right {
  bottom: 9px;
  inset-inline-end: 9px;
  top: auto;
}
html[class] .list-item .list-item-image-tools.--top.--left {
  top: 9px;
  inset-inline-start: 9px;
}
html[class] .list-item .list-item-share,
html[class] .list-item .list-item-like,
html[class] .list-item .list-item-privacy .btn-lock,
html[class] .list-item .list-item-image-tools .btn-lock {
  background: var(--lk-white);
  color: var(--lk-ink);
  border: 2px solid var(--lk-ink);
  border-radius: 999px;
  min-width: 26px;
  height: 26px;
  line-height: 22px;
  text-align: center;
  box-sizing: border-box;
  margin-inline-start: 4px;
  display: inline-block;
}
html[class] .list-item .list-item-share .btn-icon,
html[class] .list-item .list-item-like .btn-icon {
  color: var(--lk-ink);
  font-size: 12px;
  line-height: 22px;
  text-shadow: none;
}
html[class] .list-item .list-item-share:hover,
html[class] .list-item .list-item-like:hover { background: var(--lk-lime); }
html[class] .list-item .list-item-like .btn-liked { color: #C2185B; }

/* ---------- Sort / section tabs ---------- */
html[class] .top-sub-bar {
  background: var(--lk-white);
  border-top: 3px solid var(--lk-ink);
  border-bottom: 3px solid var(--lk-ink);
}
html[class] .content-tabs li {
  margin-inline-end: 6px;
  border: 0;
}
html[class] .content-tabs li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 0 14px;
  min-height: 36px;
  border: 2px solid var(--lk-ink);
  border-radius: 999px;
  background: var(--lk-white);
  color: var(--lk-ink);
  font-family: var(--lk-hand);
  font-size: 17px;
  line-height: 32px;
  box-sizing: border-box;
}
html[class] .content-tabs li a .btn-icon { color: var(--lk-ink); }
html[class] .content-tabs li:hover a { background: var(--lk-soft); }
html[class] .content-tabs li.current a,
html[class] .content-tabs li.current:hover a {
  background: var(--lk-lime);
  box-shadow: 3px 3px 0 var(--lk-ink);
}
/* remove Peafowl's underline indicator */
html[class] .content-tabs li.current,
html[class] .content-tabs li:hover,
html[class] .content-tabs li.visited {
  border-color: transparent;
  border-bottom-color: transparent;
}
html[class] .tab-menu {
  border: 2px solid var(--lk-ink);
  border-radius: 999px;
  background: var(--lk-lime);
  font-family: var(--lk-hand);
  font-size: 17px;
  padding: 2px 12px;
}

/* ---------- Profile header ---------- */
html[class] #background-cover {
  border-bottom: 3px solid var(--lk-ink);
}
html[class] .top-user-avatar .user-image,
html[class] .top-user .user-image {
  border: 3px solid var(--lk-ink);
  border-radius: 50%;
  background: var(--lk-lavender);
  box-shadow: var(--lk-shadow-sm);
}
html[class] .top-user-avatar .default-user-image .icon,
html[class] .top-user-avatar .default-user-image svg { color: var(--lk-ink); fill: var(--lk-ink); }
html[class] .top-user h1,
html[class] .top-user h1 a {
  font-family: var(--lk-hand);
  font-weight: 400;
  color: var(--lk-ink);
}
html[class] .number-figures {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  margin: 0 0 6px 6px;
  border: 2px solid var(--lk-ink);
  border-radius: 999px;
  background: var(--lk-white);
  color: var(--lk-ink);
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 2px 2px 0 var(--lk-ink);
}
html[class] .number-figures b { font-size: 15px; font-weight: 800; color: var(--lk-ink); }
html[class] .number-figures span,
html[class] .number-figures .icon { color: var(--lk-ink); text-transform: none; letter-spacing: 0; }
html[class] .number-figures:hover { background: var(--lk-lime); color: var(--lk-ink); }
html[class] .top-user-credentials .user-meta .number-figures:first-child { margin-inline-start: 0; }
html[class] .top-sub-bar .header-tabs > .user-image {
  border: 2px solid var(--lk-ink);
  border-radius: 50%;
  background: var(--lk-lavender);
}

/* ---------- Album header ---------- */
html[class] .viewer-title,
html[class] .viewer-title a,
html[class] h1.header-title,
html[class] h1.header-title a {
  font-family: var(--lk-hand);
  font-weight: 400;
  color: var(--lk-ink);
}
html[class] .header-title .header-icon { color: var(--lk-ink); }
html[class] .description-meta {
  color: var(--lk-muted-2);
  font-size: 14px;
}
html[class] .breadcrum-item .user-image,
html[class] .header-content-breadcrum .user-image {
  border: 2px solid var(--lk-ink);
  border-radius: 50%;
  background: var(--lk-lavender);
}

/* ---------- Tags ---------- */
html[class] .content-tags .tag {
  border: 2px solid var(--lk-ink);
  border-radius: 999px;
  background: var(--lk-sky);
  color: var(--lk-ink);
  box-shadow: none;
}

/* ---------- Pagination & load more ---------- */
html[class] .content-listing-pagination { margin: 26px 0 10px; }
html[class] .content-listing-pagination li a {
  display: inline-block;
  min-width: 40px;
  height: 40px;
  line-height: 36px;
  margin: 0 4px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 2px solid var(--lk-ink);
  border-radius: 12px;
  background: var(--lk-white);
  color: var(--lk-ink);
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--lk-ink);
}
html[class] .content-listing-pagination li a:hover { background: var(--lk-soft); }
html[class] .content-listing-pagination li.pagination-current a {
  background: var(--lk-lime);
}
html[class] .content-listing-pagination li.pagination-disabled a {
  opacity: .4;
  box-shadow: none;
}
html[class] .content-listing-more .btn {
  font-family: var(--lk-hand);
  font-size: 20px;
}

/* ---------- Empty state ---------- */
html[class] .content-empty {
  border: 3px dashed var(--lk-line);
  border-radius: 18px;
  background: var(--lk-white);
  color: var(--lk-muted-2);
  padding: 32px 20px;
}
html[class] .content-empty .icon { color: var(--lk-ink); }
html[class] .content-empty h2 {
  font-family: var(--lk-hand);
  color: var(--lk-ink);
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
  html[class] .list-item .list-item-desc { padding: 6px 56px 7px 10px; }
  html[class] .list-item .list-item-desc-title-link { font-size: 16px; }
  html[class] .content-tabs li a { font-size: 16px; padding: 0 11px; }
  html[class] .number-figures { margin-inline-start: 4px; }
}

/* ---------- refinements (round 2) ---------- */
html[class] .list-item .list-item-image-tools.--bottom.--right {
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow: visible;
  bottom: 12px;
}
html[class] .list-item .list-item-image-tools.--bottom.--right > div { margin-inline-start: 0; }
html[class] .content-tabs li a { min-height: 34px; line-height: 30px; margin: 5px 0; }
html[class] .top-sub-bar .header-tabs > .user-image { margin-top: 8px; }
/* Peafowl sets width:2em on bottom tools (stacked); let the chip row size itself */
html[class] .list-item .list-item-image-tools.--bottom.--right { width: auto; }