/* Template library cards, search, filters and tabs (templates.html, the home page and the builder).
   Design canvas "9 · Templates": cream page, white cards, coloured category dots. */
body.on-cream { background: var(--sand); color: var(--ink); }
html:has(body.on-cream) { background: var(--sand); }
.on-cream main .lead, .on-cream main .muted { color: #4a4766; }
.on-cream main .kicker { color: var(--rust); }
.on-cream main .btn:not(.brass) { color: var(--ink); border-color: rgba(11, 16, 51, .55); }
.on-cream main .btn:not(.brass):hover { border-color: var(--ink); }
.on-cream main .chip { color: var(--ink); border-color: #e2dacb; background: #fff; }
.on-cream main .chip.on, .on-cream main .chip:hover { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.on-cream :focus-visible { outline-color: var(--rust); }
.on-cream .nav, .on-cream .foot .brand, .on-cream .foot h4 { color: var(--bone); }
.on-cream .nav.solid { background: var(--ink); }
.on-cream .foot { background: var(--ink); color: var(--dim); margin-top: 0; border-top: 0; }
.on-cream .proto { background: rgba(11, 16, 51, .85); color: var(--bone); }
.lib-lead { margin-top: 18px; }

/* Toolbar */
.ltools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.lsearch { flex: 1 1 360px; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1.5px solid #e2dacb; color: var(--ink); }
.lsearch:focus-within { border-color: var(--ink); }
.lsearch svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; color: var(--ink); }
.lsearch input::placeholder { color: #6b6785; }
.lstyles { display: flex; gap: 8px; flex-wrap: wrap; }
.lstyles .chip { min-height: 46px; padding: 0 16px; font-size: 15px; }
.ltabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ltab { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 16px; background: #fff; color: var(--ink); font-weight: 600; font-size: 15px;
  border: 1.5px solid transparent; transition: background-color .25s var(--ease), color .25s var(--ease); }
.ltab i { width: 12px; height: 12px; border-radius: 4px; background: var(--dot); }
.ltab em { font-style: normal; font-weight: 400; opacity: .75; }
.ltab.on { background: var(--ink); color: var(--bone); }
.ltab.on i[style*="--bone"] { background: var(--bone); }
.ltab:not(.on) i[style*="--bone"] { background: var(--ink); }
.ltab:hover:not(.on):not(:disabled) { border-color: var(--ink); }
.ltab:disabled { opacity: .45; cursor: default; }
.lcount { margin-top: 18px; font-size: 14px; color: #4a4766; min-height: 1.4em; }

/* Cards */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; margin-top: 12px; }
.lcard { border-radius: 26px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -45px rgba(11, 16, 51, .45);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity 1.1s var(--ease); }
.lcard:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -40px rgba(11, 16, 51, .55); }
.lcard.rv:not(.in) { transform: translateY(26px); }
.lshot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e7e1d6; }
.lshot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.lcard:hover .lshot img { transform: scale(1.06); }
.lbadge { position: absolute; inset-inline-start: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: #fff8ee; color: var(--ink); font-size: 12px; font-weight: 700; }
.lbadge::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--dot); }
.lbadge.static { position: static; }
.lmotion { position: absolute; inset-inline-end: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--ink); color: var(--brass); font-size: 12px; font-weight: 700; }
.lmotion::before { content: ""; width: 0; height: 0; border-block: 5px solid transparent; border-inline-start: 8px solid currentColor; }
.lbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lrow h3 { font-family: var(--serif); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
[dir="rtl"] .lrow h3 { font-weight: 700; line-height: 1.4; }
.lprice { font-size: 14px; color: #4a4766; white-space: nowrap; }
.lprice.req { color: #b4232a; font-weight: 600; }
.lmeta { font-size: 14px; color: #4a4766; }
.lacts { display: flex; gap: 8px; margin-top: 4px; }
.lacts .btn { flex: 1; }
.lcard .btn:not(.brass) { color: var(--ink); border: 1.5px solid var(--ink); }
.lnone { margin-top: 28px; padding: 28px; border-radius: 22px; background: #fff; color: #4a4766; text-align: center; }
.lmore { display: flex; justify-content: center; padding: 34px 0 0; }
.lmore .btn { min-height: 54px; padding: 0 30px; font-weight: 600; }
@media (max-width: 560px) {
  .ltabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .ltabs::-webkit-scrollbar { display: none; }
  .ltab { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .lcard, .lcard:hover, .lshot img, .lcard:hover .lshot img { transform: none; transition: none; } }