/* Five colour choices for the same local marketplace layout. */
.collection[data-palette="burgundy"] {
  --primary: #5b2741; --accent: #ba9554; --ink: #35292e;
  --base: #faf7f2; --wash: #f0eae4; --line: #ded5ce;
  --muted: #6c5e56; --panel: #eddfe0; --on-primary: #ffffff;
  --focus: #875c20; --saved: #ac2445;
}
.collection[data-palette="forest"] {
  --primary: #1e5744; --accent: #bb8d2c; --ink: #1e352d;
  --base: #f5f8f2; --wash: #e8f0e5; --line: #d0ddce;
  --muted: #56695e; --panel: #e4eddc; --on-primary: #ffffff;
  --focus: #876018; --saved: #ac2445;
}
.collection[data-palette="blue"] {
  --primary: #294ca6; --accent: #c99f35; --ink: #23334f;
  --base: #f5f7fc; --wash: #e8eef9; --line: #d3dbea;
  --muted: #5a6880; --panel: #e4ebf8; --on-primary: #ffffff;
  --focus: #294ca6; --saved: #ac2445;
}
.collection[data-palette="saffron"] {
  --primary: #8f302f; --accent: #efb638; --ink: #392e27;
  --base: #fffaf0; --wash: #f4e9d4; --line: #dfceb3;
  --muted: #71604c; --panel: #f5e5c4; --on-primary: #ffffff;
  --focus: #8f302f; --saved: #ac2445;
}
.collection[data-palette="midnight"] {
  --primary: #edc58c; --accent: #edc58c; --ink: #f3eee6;
  --base: #21272c; --wash: #2c353b; --line: #465158;
  --muted: #b3bdc0; --panel: #303c43; --on-primary: #21272c;
  --focus: #edc58c; --saved: #f1a2af;
  color-scheme: dark;
}
.collection[data-palette] .primary,
.collection[data-palette] .sample-strip,
.collection[data-palette] .local-still-life .art-caption {
  background: var(--primary);
  color: var(--on-primary);
}
.collection[data-palette] .seller-banner { background: var(--panel); }
.collection[data-palette] .product-label,
.collection[data-palette] .save { background: var(--base); color: var(--ink); }
.collection[data-palette] .dialog-close { background: var(--base); }
.collection[data-palette] .save[aria-pressed="true"] { color: var(--saved); }
.collection[data-palette] .save[aria-pressed="true"] .icon { fill: var(--saved); }
.collection[data-palette] input::placeholder { color: var(--muted); opacity: 1; }
.collection[data-palette] select option { background: var(--base); color: var(--ink); }
.collection[data-palette] :focus-visible { outline-color: var(--focus); }

/* The neutral preview controls sit outside the marketplace's colour system. */
.palette-picker {
  background: #ffffff; color: #29333b; border-bottom: 1px solid #dce1e4;
  padding: 18px max(22px, calc((100% - 1220px) / 2));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
.palette-picker summary { cursor: pointer; font-size: 14px; font-weight: 650; }
.palette-picker summary::marker { color: #68777e; font-size: 11px; }
.palette-intro { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 9px 0 15px; }
.palette-intro p { color: #647078; font-size: 11px; line-height: 1.5; }
.palette-status { color: #29333b !important; text-align: right; }
.palette-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.palette-option {
  position: relative; padding: 11px; min-width: 0; text-align: left;
  background: #ffffff; color: #29333b; border: 1px solid #d9dfe2;
  border-radius: 7px; font-family: inherit;
}
.palette-option[aria-pressed="true"] { border-color: #33464e; box-shadow: 0 0 0 1px #33464e; }
.palette-option .palette-colours { display: flex; height: 27px; overflow: hidden; border-radius: 3px; margin-bottom: 10px; border: 1px solid #0000000d; }
.palette-option .palette-colours i { flex: 1; }
.palette-option strong { display: block; font-size: 12px; font-weight: 650; padding-right: 10px; }
.palette-option small { display: block; margin-top: 4px; color: #647078; font-size: 10px; line-height: 1.5; }
.palette-option .palette-check { display: none; position: absolute; right: 10px; bottom: 30px; color: #33464e; font-size: 13px; }
.palette-option[aria-pressed="true"] .palette-check { display: block; }
.palette-picker :focus-visible { outline: 3px solid #294ca6 !important; outline-offset: 3px; }
@media(max-width: 700px) {
  .palette-picker { padding: 15px 16px; }
  .palette-options { gap: 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .palette-option { padding: 9px; }
  .palette-option strong { font-size: 11px; }
  .palette-option small { font-size: 9px; }
  .palette-option .palette-check { right: 7px; bottom: 26px; }
}
@media(max-width: 380px) {
  .palette-intro { align-items: flex-start; flex-direction: column; gap: 4px; }
  .palette-status { text-align: left; }
  .palette-option strong { font-size: 10px; }
}

.palette-option .palette-check{top:8px;bottom:auto;background:#fff;border-radius:50%;width:18px;height:18px;text-align:center;line-height:18px}

@media(max-width:900px){.collection .nav{justify-content:flex-start;gap:24px}}