/* Smart Collection: product header, tabs, acquisition budget, plan and watchlist (js/views/smartCollection.js). */
.sc-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.sc-top { margin: 18px 0 8px; }
.sc-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 18px; margin-bottom: 6px; }
.sc-brand b { font-family: var(--font-serif, "Playfair Display", serif); font-weight: 500; font-size: 34px; line-height: 1.05; color: #7a4a12; }
.sc-div { align-self: center; width: 1px; height: 24px; background: #b9bfbd; display: block; }
.sc-prod { font-family: var(--font-serif, "Playfair Display", serif); font-size: 20px; font-style: italic; color: #7a4a12; }
.sc-sub { font-size: 14px; color: var(--text-secondary, #5b6b70); }
.sc-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 14px 0 4px; }
.sc-tab { padding: 8px 16px; border-radius: 999px; border: 1px solid #cfd6d8; background: #fff; font: 500 13.5px Inter, sans-serif; color: #44575b; cursor: pointer; }
.sc-tab:hover { border-color: var(--accent, #2f6f73); }
.sc-tab.on { background: #1f5f6b; color: #fff; border-color: #1f5f6b; }
.sc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.sc-stat { background: #fff; border: 1px solid var(--border, #e3e6e7); border-radius: 12px; padding: 14px 16px; }
.sc-stat__v { font-size: 22px; font-weight: 600; }
.sc-stat__l { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted, #7b898d); margin-top: 2px; }
.sc-stat__h { font-size: 12px; color: var(--text-secondary, #5b6b70); }
.sc-card { background: #fff; border: 1px solid var(--border, #e3e6e7); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.sc-card__t { font-family: var(--font-serif, "Playfair Display", serif); font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.sc-budget { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sc-budget label { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.sc-budget input { width: 180px; padding: 8px 10px; border: 1px solid var(--border, #cfd6d8); border-radius: 8px; font: inherit; }
.sc-note { font-size: 12px; color: var(--text-muted, #7b898d); margin-top: 10px; }
.sc-h { font-family: var(--font-serif, "Playfair Display", serif); font-size: 20px; font-weight: 600; margin: 22px 0 10px; }
.sc-empty { background: #fff; border: 1px dashed #cfd6d8; border-radius: 12px; padding: 18px 20px; color: var(--text-secondary, #5b6b70); font-size: 14px; }
.sc-item { display: flex; gap: 16px; background: #fff; border: 1px solid var(--border, #e3e6e7); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.sc-item__img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; background: #eceae4; flex: 0 0 auto; }
.sc-item__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-item__artist { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #7b898d); }
.sc-item__title { font-family: var(--font-serif, "Playfair Display", serif); font-size: 18px; font-weight: 600; }
.sc-item__meta, .sc-item__cost { font-size: 13px; color: var(--text-secondary, #5b6b70); }
.sc-item__basis { color: var(--text-muted, #7b898d); }
.sc-item__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.sc-fit, .sc-status { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.sc-fit--ok { background: #e3f1e6; color: #2c6a3a; }
.sc-fit--near { background: #fbeccf; color: #8a5a0a; }
.sc-fit--above { background: #f6dcdc; color: #8a2f2f; }
.sc-fit--none { background: #eceae4; color: #6b7b7f; }
.sc-status { background: #eef2f3; color: #44575b; }
.sc-item__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.sc-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid #cfd6d8; background: #fff; font: 500 13px Inter, sans-serif; color: #33474b; cursor: pointer; }
.sc-btn:hover { border-color: var(--accent, #2f6f73); }
.sc-btn.primary { background: #1f5f6b; color: #fff; border-color: #1f5f6b; }
.sc-btn.danger { color: #8a2f2f; }
.sc-link { font-size: 12.5px; color: var(--accent, #2f6f73); margin-left: 6px; }
@media (max-width: 760px) { .sc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-item { flex-direction: column; } .sc-item__img { width: 100%; height: 180px; } }
/* The large tagline is not drawn inside the cover/avatar header any more: the collection tab shows it under the product block. */
.sc-notag .profile-header__tagline { display: none; }
.sc-tagline { font-family: var(--font-serif, "Playfair Display", serif); font-weight: 700; font-size: 34px; line-height: 1.2; text-align: center; margin: 34px 0 6px; color: #1a1d1c; }
@media (max-width: 760px) { .sc-tagline { font-size: 26px; margin-top: 26px; } }
/* The cover keeps its composition at any window width: a fixed proportion instead of a fixed 180px height (which cropped
   the picture harder the wider the window got), and the same maximum width as the product block under it. */
.sc-profile { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.sc-profile .profile-header__cover { height: auto; aspect-ratio: 3.2 / 1; min-height: 150px; }