/* Pinterest Magazine — true masonry experience */
body.np-theme-pinterest {
  --pin-red: #e60023;
  --pin-radius: 18px;
  background: #fff;
  font-family: 'Figtree', -apple-system, sans-serif;
}
html[data-mode="dark"] body.np-theme-pinterest { background: #111; }

/* Header restyle: clean, pill search */
.np-theme-pinterest .np-header { border-bottom: 0; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.np-theme-pinterest .np-search { border-radius: 999px; background: #efefef; border: 0; }
.np-theme-pinterest .np-search input { background: transparent; }
html[data-mode="dark"] .np-theme-pinterest .np-search { background: #2a2a2a; }
.np-theme-pinterest .np-breaking { display: none; }
.np-theme-pinterest .np-menu a { border-radius: 999px; padding: 8px 14px; }
.np-theme-pinterest .np-menu a:hover { background: #f0f0f0; }
html[data-mode="dark"] .np-theme-pinterest .np-menu a:hover { background: #2a2a2a; }

/* Category chips bar */
.pin-chips-bar {
  display: flex; gap: 10px; overflow-x: auto; padding: 18px 2px 22px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pin-chips-bar::-webkit-scrollbar { display: none; }
.pin-chip-nav {
  flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  background: #efefef; color: #111; text-decoration: none;
  transition: background-color .18s, color .18s, transform .18s;
}
.pin-chip-nav:hover { background: #e1e1e1; color: #111; transform: translateY(-1px); }
.pin-chip-nav.active { background: #111; color: #fff; }
html[data-mode="dark"] .pin-chip-nav { background: #2a2a2a; color: #eee; }
html[data-mode="dark"] .pin-chip-nav.active { background: #fff; color: #111; }

/* Masonry grid: JS builds flex columns */
.pin-grid { display: flex; gap: 16px; align-items: flex-start; }
.pin-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 860px) { .pin-grid, .pin-col { gap: 20px; } }

/* No-JS fallback */
.pin-grid:not(:has(.pin-col)) { display: block; columns: 4 240px; column-gap: 18px; }
.pin-grid:not(:has(.pin-col)) .pin { break-inside: avoid; margin-bottom: 18px; }

/* Pin card */
.pin { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .4s ease, transform .4s ease; }
.pin.pin-in { opacity: 1; transform: none; }
.pin-media {
  position: relative; border-radius: var(--pin-radius); overflow: hidden;
  background: linear-gradient(110deg, #ececec 30%, #f7f7f7 45%, #ececec 60%);
  background-size: 200% 100%; animation: pinShimmer 1.4s linear infinite; min-height: 120px;
}
html[data-mode="dark"] .pin-media { background: linear-gradient(110deg, #222 30%, #2c2c2c 45%, #222 60%); background-size: 200% 100%; }
@keyframes pinShimmer { to { background-position: -200% 0; } }
.pin-media img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.pin.img-ready .pin-media { animation: none; }
.pin.img-ready .pin-media img { opacity: 1; }
.pin:hover .pin-media img { transform: scale(1.04); }
.pin-play {
  position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem;
}

/* Hover overlay */
.pin-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0;
  transition: opacity .22s ease; display: flex; flex-direction: column; justify-content: space-between; padding: 12px;
  pointer-events: none;
}
.pin:hover .pin-overlay, .pin:focus-within .pin-overlay { opacity: 1; pointer-events: auto; }
@media (hover: none) { .pin-overlay { opacity: 1; pointer-events: auto; background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 35%, transparent 65%, rgba(0,0,0,.28)); } }
.pin-save {
  align-self: flex-end; background: var(--pin-red); color: #fff; border: 0; border-radius: 999px;
  padding: 11px 20px; font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: background-color .18s, transform .12s; font-family: inherit;
}
.pin-save:hover { background: #ad081b; }
.pin-save:active { transform: scale(.95); }
.pin-save.saved { background: #111; }
.pin-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pin-actions-right { display: flex; gap: 8px; margin-left: auto; }
.pin-chip {
  background: rgba(255,255,255,.92); color: #111; border-radius: 999px; padding: 7px 13px;
  font-size: .78rem; font-weight: 700; text-decoration: none; max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .15s;
}
.pin-chip:hover { transform: translateY(-2px); color: var(--chip, #111); }
.pin-act {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92);
  color: #111; cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background-color .15s, color .15s;
}
.pin-act:hover { transform: scale(1.1); background: #fff; }
.pin-like.liked { color: var(--pin-red); }
.pin-like.pop { animation: pinPop .35s ease; }
@keyframes pinPop { 40% { transform: scale(1.35); } }

/* Pin body */
.pin-body { padding: 10px 6px 2px; }
.pin-title { font-size: .98rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.pin-title a { color: inherit; text-decoration: none; }
.pin-title a:hover { text-decoration: underline; }
.pin-author { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-size: .82rem; }
.pin-author:hover .pin-author-name { text-decoration: underline; }
.pin-author:hover { color: inherit; }
.pin-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.pin-avatar-letter {
  display: inline-flex; align-items: center; justify-content: center;
  background: #efefef; color: #333; font-weight: 700; font-size: .72rem;
}
html[data-mode="dark"] .pin-avatar-letter { background: #333; color: #eee; }
.pin-dot, .pin-time { opacity: .6; }

/* Loader + end */
.pin-loader { display: flex; justify-content: center; gap: 8px; padding: 34px 0; }
.pin-loader span { width: 11px; height: 11px; border-radius: 50%; background: var(--pin-red); animation: pinBounce 1s infinite ease-in-out; }
.pin-loader span:nth-child(2) { animation-delay: .15s; }
.pin-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes pinBounce { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-9px); opacity: 1; } }
.pin-end { text-align: center; padding: 30px 0 44px; font-weight: 600; opacity: .55; }

/* Archive head */
.pin-archive-head { text-align: center; padding: 44px 0 8px; }
.pin-archive-head h1 { font-weight: 800; letter-spacing: -1px; }
.pin-archive-head p { max-width: 560px; margin: 8px auto 0; opacity: .7; }
.pin-archive-count {
  display: inline-block; margin: 14px 0 22px; padding: 7px 16px; border-radius: 999px;
  background: #efefef; font-size: .82rem; font-weight: 700;
}
html[data-mode="dark"] .pin-archive-count { background: #2a2a2a; }

/* Cards elsewhere (single/related, default fallback pages) get rounded pin feel */
.np-theme-pinterest .np-card { border-radius: var(--pin-radius); overflow: hidden; box-shadow: 0 1px 10px rgba(0,0,0,.07); border: 0; transition: transform .2s, box-shadow .2s; }
.np-theme-pinterest .np-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.13); }
.np-theme-pinterest .np-btn, .np-theme-pinterest .btn, .np-theme-pinterest .page-link { border-radius: 999px !important; }
.np-theme-pinterest .np-footer { border-radius: 32px 32px 0 0; }