/* My cards and Watching only. Reuses the shared photographic shell and existing eight illustrations. */
.collection-page {
  --collection-ink:#142e4b;
  --collection-text:#40556a;
  --collection-muted:#687a89;
  --collection-paper:#fffdf7;
  --collection-line:#d9ddd9;
  width:min(84%,1440px);
  min-width:0;
  min-height:100svh;
  margin:0 auto;
  padding:129px 0 52px;
  color:var(--collection-ink);
  font-family:var(--sans,Arial,Helvetica,sans-serif);
  box-sizing:border-box;
}
.collection-page *, .collection-page *::before, .collection-page *::after {box-sizing:border-box}
.collection-page .collection-hero {margin:0 0 25px;padding:0 4px;max-width:880px}
.collection-page .collection-hero .eyebrow {
  margin:0 0 12px;color:#78563e;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:2px;
}
.collection-page .collection-hero h1 {
  margin:0 0 13px;color:var(--collection-ink);
  font:400 clamp(42px,4.1vw,62px)/1.06 var(--serif,Georgia,serif);
  letter-spacing:-1.7px;overflow-wrap:anywhere;
}
.collection-page .collection-hero .lead,
.collection-page .collection-hero .sub,
.collection-page .collection-hero >p:not(.eyebrow) {
  max-width:640px;margin:0;color:#344d65;font-size:15px;line-height:1.55;letter-spacing:0;
}
.collection-page .collection-panel {
  min-width:0;padding:25px 25px 22px;
  border:1px solid rgba(246,244,235,.92);border-radius:23px;
  background:rgba(250,248,241,.97);
  box-shadow:0 24px 44px -27px rgba(16,40,64,.45),0 5px 15px -9px rgba(25,43,57,.22),inset 0 1px 0 rgba(255,255,255,.8);
}
.collection-page .collection-toolbar {
  display:grid;grid-template-columns:minmax(205px,1.05fr) minmax(135px,.7fr) minmax(220px,1.25fr);
  align-items:end;gap:16px;min-width:0;margin:0 0 16px;
}
.collection-page .collection-tabs {
  display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;
  padding:4px;border:1px solid #d4dcd9;border-radius:12px;background:#edf0eb;
}
.collection-page .collection-tabs a,
.collection-page .collection-tabs button {
  display:flex;align-items:center;justify-content:center;gap:7px;flex:1 1 0;
  min-width:0;min-height:36px;padding:8px 11px;border:1px solid transparent;border-radius:9px;
  background:transparent;color:#4a5f70;text-decoration:none;text-align:center;
  font:500 12px/1.3 var(--sans,Arial,sans-serif);white-space:normal;overflow-wrap:anywhere;cursor:pointer;
}
.collection-page .collection-tabs .is-active,
.collection-page .collection-tabs [aria-current="page"],
.collection-page .collection-tabs [aria-selected="true"] {
  color:#fffaf0;background:#193851;border-color:#193851;box-shadow:0 2px 4px rgba(17,42,65,.12);
}
.collection-page .collection-tabs :is(a,button) span {font-size:10px;opacity:.82}
.collection-page :is(.collection-path,.collection-search) {display:block;min-width:0;max-width:100%}
.collection-page :is(.collection-path,.collection-search) label,
.collection-page label:is(.collection-path,.collection-search),
.collection-page :is(.collection-path,.collection-search)>span {
  color:#506478;font:600 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.8px;
}
.collection-page :is(.collection-path,.collection-search) :is(input,select),
.collection-page :is(#collection-search,#collection-path) {
  display:block;width:100%;min-width:0;max-width:100%;min-height:44px;margin-top:6px;padding:10px 12px;
  color:var(--collection-ink);background:#fffdf8;border:1px solid #becbd0;border-radius:10px;
  font:400 13px/1.35 var(--sans,Arial,sans-serif);letter-spacing:0;
}
.collection-page input::placeholder {color:#7c8b95;opacity:1}
.collection-page :is(.collection-count,#collection-count) {
  display:block;margin:0 0 16px;color:#627484;font:400 11px/1.5 var(--sans,Arial,sans-serif);
}
.collection-page .collection-grid {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;
  gap:18px;min-width:0;
}
.collection-page .collection-card {
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:16px 18px;
  min-width:0;min-height:330px;padding:20px 19px 17px;border:1px solid #d9dedb;border-radius:17px;
  background:var(--collection-paper);
  box-shadow:0 8px 16px -13px rgba(24,48,64,.34),0 1px 1px rgba(22,44,60,.04);
}
.collection-page .collection-card.is-watched {border-color:#b7c7cb}
.collection-page .collection-card-art {
  grid-column:1;grid-row:1;display:grid;place-items:center;align-self:stretch;
  min-width:0;min-height:200px;padding:7px 0;background:transparent;border:0;
  overflow:hidden;isolation:isolate;
}
.collection-page .collection-card-art::before,
.collection-page .collection-card-art::after {content:none;background:none;box-shadow:none}
.collection-page .collection-card-art .category-art,
.collection-page .collection-card-art >img {
  display:block;width:100%;height:auto;max-width:100%;max-height:265px;object-fit:contain;object-position:center;
  padding:0;transform:scale(var(--collection-art-zoom,1.3));transform-origin:center;filter:none;mix-blend-mode:normal;
}
/* Trim the source canvas's transparent margins, not the card or its 33% art column. */
.collection-page .collection-card-art img[src*="sell-online-warm-copper-v1.png"] {--collection-art-zoom:1.62}
.collection-page .collection-card-art img[src*="services-"] {--collection-art-zoom:1.16}
.collection-page .collection-card-body {grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0}
.collection-page :is(.collection-card-meta,.collection-meta) {
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 10px;min-width:0;
  color:var(--collection-muted);font:400 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:0;
}
.collection-page :is(.collection-card-meta,.collection-meta) :is(b,strong,span:first-child) {
  max-width:100%;padding:4px 7px;border:1px solid #ddd3c6;border-radius:5px;
  color:#75523b;background:#f4ede1;font-weight:600;font-size:9px;letter-spacing:.35px;overflow-wrap:anywhere;
}
.collection-page .collection-card-body :is(h2,h3) {
  margin:0 0 10px;color:var(--collection-ink);font:400 clamp(22px,1.7vw,27px)/1.16 var(--serif,Georgia,serif);
  letter-spacing:-.55px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.collection-page :is(.collection-card-summary,.collection-summary),
.collection-page .collection-card-body>p {
  margin:0 0 12px;color:var(--collection-text);font:400 12px/1.55 var(--sans,Arial,sans-serif);
  overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.collection-page .collection-tracking {
  min-width:0;margin:3px 0 0;padding:11px 0 0;border-top:1px solid #e3e6e0;
  color:#4d6477;font-size:11px;line-height:1.5;
}
.collection-page .collection-tracking >:is(b,strong,span),
.collection-page .collection-tracking-label {
  display:block;margin:0 0 7px;color:#5b707e;font:600 8px/1.4 var(--sans,Arial,sans-serif);letter-spacing:1.1px;
}
.collection-page :is(.collection-tracking-metrics,.collection-metrics) {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-width:0;margin-bottom:7px;
}
.collection-page :is(.collection-tracking-metrics,.collection-metrics) :is(strong,b) {
  display:block;color:#28465d;font:500 12px/1.4 var(--sans,Arial,sans-serif);overflow-wrap:anywhere;
}
.collection-page :is(.collection-tracking-metrics,.collection-metrics) :is(span,small) {
  display:block;color:#73818b;font-size:8px;line-height:1.4;
}
.collection-page .collection-tracking p {
  margin:0;color:#607381;font:400 10px/1.5 var(--sans,Arial,sans-serif);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.collection-page .collection-card-actions {
  grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;
  gap:7px;min-width:0;margin:0;padding-top:13px;border-top:1px solid #e0e4de;
}
.collection-page .collection-card-body>.collection-card-actions {margin-top:auto}
.collection-page .collection-card-actions :is(button,a),
.collection-page .collection-button {
  display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:40px;max-width:100%;
  padding:9px 7px;border:1px solid #bdc9cb;border-radius:8px;background:#f3f6f3;color:#24435b;
  text-decoration:none;text-align:center;font:500 11px/1.25 var(--sans,Arial,sans-serif);letter-spacing:0;
  white-space:normal;overflow-wrap:anywhere;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.collection-page .collection-card-actions [data-action="detail"] {background:#183850;border-color:#183850;color:#fffaf0}
.collection-page .collection-card-actions [data-action="save"][aria-pressed="true"] {background:#e5ede8;border-color:#8caaa7;color:#235a58}
.collection-page .collection-card-actions [data-action="try"],
.collection-page .collection-button.gold {
  background:linear-gradient(125deg,var(--copper-light,#e4c9aa),var(--copper-deep,#d3a77f));
  border-color:var(--copper-border,#c79a73);color:#39291f;
  box-shadow:0 3px 7px -5px rgba(98,56,36,.3);
}
.collection-page .collection-card-actions [data-action="detail"]:hover {background:#244b68;border-color:#244b68}
.collection-page .collection-card-actions [data-action="save"]:hover {background:#e8eeea;border-color:#8ea7ad}
.collection-page .collection-card-actions [data-action="try"]:hover,
.collection-page .collection-button.gold:hover {
  background:linear-gradient(125deg,var(--copper-hover-light,#dfbb96),var(--copper-hover-deep,#c9956d));border-color:var(--copper-hover-border,#b98460);
}
.collection-page :is(a,button,input,select):focus-visible {
  outline:3px solid #ae7650;outline-offset:3px;box-shadow:0 0 0 1px #fffdf7;
}
.collection-page :is(button,input,select):disabled {opacity:.57;cursor:not-allowed}
.collection-page .inline-arrow {width:.8em;height:.8em;flex:0 0 .8em;fill:none;stroke:currentColor;stroke-width:1.6}
.collection-page .collection-empty {
  grid-column:1/-1;min-width:0;padding:33px 25px;text-align:center;
  border:1px dashed #c9d3d2;border-radius:15px;background:rgba(255,253,247,.55);
}
.collection-page .collection-empty h2 {margin:0 0 10px;color:var(--collection-ink);font:400 28px/1.2 var(--serif,Georgia,serif)}
.collection-page .collection-empty p {margin:0 auto 17px;max-width:520px;color:#586f7e;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.collection-page .collection-status {min-width:0;margin-top:18px;padding-top:13px;border-top:1px solid #d9ddd9}
.collection-page .collection-status .read-status {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0;border:0;background:none;color:#657988;font-size:10px;line-height:1.5;text-align:left}
.collection-page .collection-status .read-status button {flex:0 0 auto;font-size:10px}
.collection-page :is(.collection-unresolved,#collection-unresolved) {margin:17px 0 0;color:#7b6650;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.collection-page >.read-status,
.collection-page .collection-note {margin:17px 4px 0;color:#425d72;font-size:11px;line-height:1.55;overflow-wrap:anywhere}

@media(min-width:761px) and (max-width:1150px) {
  .collection-page {width:90%;padding-top:124px}
  .collection-page .collection-panel {padding:21px}
  .collection-page .collection-toolbar {grid-template-columns:minmax(180px,1fr) minmax(125px,.65fr) minmax(185px,1fr);gap:12px}
  .collection-page .collection-grid {gap:14px}
  .collection-page .collection-card {gap:14px 13px;padding:17px 14px 15px;min-height:330px}
  .collection-page .collection-card-body :is(h2,h3) {font-size:22px}
  .collection-page .collection-card-actions :is(button,a) {font-size:10px;padding-inline:5px;gap:4px}
}
@media(min-width:761px) and (max-width:930px) {
  .collection-page .collection-toolbar {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .collection-page .collection-search {grid-column:1/-1}
  .collection-page .collection-grid {grid-template-columns:minmax(0,1fr)}
  .collection-page .collection-card {grid-template-columns:minmax(0,1fr) minmax(0,2fr);min-height:300px;padding:22px;gap:18px 23px}
  .collection-page .collection-card-art .category-art {max-height:240px}
}
@media(max-width:760px) {
  .collection-page {width:100%;min-height:0;padding:17px 0 36px}
  .collection-page .collection-hero {margin-bottom:21px;padding:0 3px}
  .collection-page .collection-hero h1 {font-size:42px;letter-spacing:-1.1px;margin-bottom:11px}
  .collection-page .collection-hero .eyebrow {font-size:9px;letter-spacing:1.7px;margin-bottom:10px}
  .collection-page .collection-hero >p:not(.eyebrow) {font-size:13px;line-height:1.5}
  .collection-page .collection-panel {padding:17px 14px;border-radius:18px;box-shadow:0 13px 28px -23px rgba(24,49,70,.45)}
  .collection-page .collection-toolbar {grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:13px}
  .collection-page .collection-tabs {width:100%;gap:5px}
  .collection-page .collection-tabs :is(a,button) {min-height:38px;font-size:12px}
  .collection-page .collection-search {grid-column:auto}
  .collection-page .collection-grid {grid-template-columns:minmax(0,1fr);gap:15px}
  .collection-page .collection-card {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:15px;min-height:0;padding:17px 15px 15px;border-radius:14px}
  .collection-page .collection-card-art {grid-column:1;grid-row:1;min-height:0;height:210px;padding:0}
  .collection-page .collection-card-art .category-art,
  .collection-page .collection-card-art >img {width:auto;height:100%;max-width:100%;max-height:210px;object-fit:contain;transform:none}
  .collection-page .collection-card-body {grid-column:1;grid-row:2}
  .collection-page .collection-card-body :is(h2,h3) {font-size:25px;line-height:1.18;-webkit-line-clamp:3}
  .collection-page :is(.collection-card-summary,.collection-summary),
  .collection-page .collection-card-body>p {font-size:12px;-webkit-line-clamp:4}
  .collection-page .collection-tracking {padding-top:11px;margin-top:2px}
  .collection-page :is(.collection-tracking-metrics,.collection-metrics) {gap:12px}
  .collection-page .collection-card-actions {grid-column:1;grid-row:3;gap:6px;padding-top:13px}
  .collection-page .collection-card-actions :is(button,a) {font-size:10px;min-height:42px;padding:9px 5px;gap:3px}
  .collection-page .collection-empty {padding:28px 16px}
  .collection-page .collection-empty h2 {font-size:25px}
}
@media(max-width:370px) {
  .collection-page .collection-panel {padding-inline:11px}
  .collection-page .collection-card {padding-inline:12px}
  .collection-page .collection-card-actions :is(button,a) {font-size:9px;padding-inline:3px;gap:3px}
  .collection-page .collection-card-art {height:190px}
}
@media(prefers-reduced-motion:reduce) {
  .collection-page :is(a,button,input,select) {transition:none}
}