/* Salon keeps its layout and product imagery in both palettes. */
.bb-salon-color {
  flex: none;
  gap: 6px;
}

.bb-salon-color__label {
  display: none;
}

@media (min-width: 1160px) {
  .bb-salon-color {
    width: auto;
    padding-inline: 11px;
    border-radius: 999px;
  }

  .bb-salon-color__label {
    display: inline;
    font-size: 11px;
    white-space: nowrap;
  }
}

html[data-design="salon"][data-bb-dark] {
  color-scheme: dark;
  --ink: #f5eadc;
  --ink-2: #e0cdbb;
  --muted: #bead9e;
  --accent: #dfb185;
  --accent-soft: #403025;
  --navy: #dfb185;
  --navy-2: #f0caa5;
  --line: #544236;
  --line-2: #8c735e;
  --line-3: #43352c;
  --bg: #171411;
  --bg-alt: #25201b;
  --surface: #211c18;
  --surface-a: rgba(33, 28, 24, .94);
  --hdr-bg: rgba(23, 20, 17, .97);
  --tile: #e9d9c8;
  --promo: #edae8d;
  --ok: #aed69b;
  --err: #ffab9c;
  --solid: #ead7c2;
  --on-solid: #231911;
  --cta: #dbad83;
  --cta-2: #ecc5a0;
  --on-cta: #231911;
  --blend: normal;
}

html[data-design="salon"][data-bb-dark] .bb-salon-color[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

html[data-design="salon"][data-bb-dark] .bb-salon-color[aria-pressed="true"] svg {
  fill: currentColor;
}

html[data-design="salon"][data-bb-dark] .announce,
html[data-design="salon"][data-bb-dark] .announce a {
  background: #211912;
  color: var(--accent);
}

html[data-design="salon"][data-bb-dark] .hdr {
  background-image: repeating-linear-gradient(90deg, #b68f6b 0 5px, transparent 5px 10px);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

html[data-design="salon"][data-bb-dark] .badge,
html[data-design="salon"][data-bb-dark] .cart-count {
  color: var(--on-solid);
}

html[data-design="salon"][data-bb-dark] .split {
  background: linear-gradient(125deg, #3c2b20, #261c16);
}

html[data-design="salon"][data-bb-dark] .split__body p,
html[data-design="salon"][data-bb-dark] .accent-soft {
  color: var(--ink-2);
}

/* Atlas z dawnego sklepu Barelly. Lokalne tło pobiera się tylko w ciemnym Salonie. */
html[data-design="salon"][data-bb-dark] :is(.statement, .world, .cat-head) {
  background-image:
    linear-gradient(90deg, var(--bg), rgba(23, 20, 17, .35) 20% 80%, var(--bg)),
    linear-gradient(0deg, var(--bg), transparent 28%, transparent 80%, var(--bg)),
    url("../img/salon-atlas.webp");
  background-position: center, center, center 48%;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, max(100%, 740px) auto;
}

html[data-design="salon"][data-bb-dark] .sort select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ead7c2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}