/* 0.15.0 — shared category identity and three-way device navigation. */

.wdw-device-switch {
  width: 100%;
  margin: 0 0 20px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 3px solid #153b32;
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: 7px 7px 0 #c7dc70;
}

.wdw-device-switch__item {
  min-width: 0;
  min-height: 66px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 7px;
  color: #153b32;
  text-decoration: none !important;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.wdw-device-switch__item:hover {
  border-color: #153b32;
  background: #eef8c9;
  color: #153b32;
  transform: translateY(-2px);
}

.wdw-device-switch__item:focus-visible {
  outline: 3px solid #153b32;
  outline-offset: 2px;
}

.wdw-device-switch__item[aria-current="page"] {
  border-color: #153b32;
  background: #153b32;
  color: #fff;
  box-shadow: 4px 4px 0 #d7f75d;
}

.wdw-device-switch__item > i {
  position: relative;
  width: 42px;
  height: 42px;
  display: block;
  border: 2px solid currentColor;
  border-radius: 5px;
  background: #fffdf7;
  color: #153b32;
  font-style: normal;
}

.wdw-device-switch__item > i::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: #8fc8b2;
}

.wdw-device-switch__item--dryer > i::before { background: #f5a36c; }

.wdw-device-switch__item--dishwasher > i::before {
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 23px;
  border-width: 2px;
  border-radius: 2px;
  background:
    linear-gradient(currentColor 0 0) 4px 6px / 22px 2px no-repeat,
    linear-gradient(currentColor 0 0) 4px 13px / 22px 2px no-repeat,
    #dcebe5;
}

.wdw-device-switch__item > i > span {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #153b32;
}

.wdw-device-switch__item[aria-current="page"] > i { background: #d7f75d; }
.wdw-device-switch__item > strong { min-width: 0; font-size: 15px; font-weight: 900; }

.wdw-device-switch__item > span {
  min-width: 42px;
  padding: 5px 7px;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.wdw-device-switch__item[aria-current="page"] > span {
  border-color: #d7f75d;
  background: #d7f75d;
  color: #153b32;
}

.wdw-category-grid {
  border: 3px solid #153b32;
  border-radius: 8px;
  box-shadow: 9px 9px 0 #c7dc70;
}

.wdw-category-card {
  min-height: 500px;
  background-color: #eef8c9;
}

.wdw-category-card::before {
  inset: auto -10% 42px auto;
  width: 88%;
  height: 58%;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  filter: none;
}

.wdw-category-card--pralka::before { background-image: url("../images/washer-category-v2.svg"); }
.wdw-category-card--suszarki::before { background-image: url("../images/dryer-category-v2.svg"); }
.wdw-category-card--zmywarki::before { background-image: url("../images/dishwasher-category-v2.svg"); }

.wdw-category-card::after {
  background: linear-gradient(180deg, #eef8c9 0%, rgba(238, 248, 201, .99) 48%, rgba(238, 248, 201, .80) 65%, rgba(238, 248, 201, .08) 100%);
}

.wdw-category-card:hover { background-color: #e3f590; }
.wdw-category-card:hover::before { transform: translate(-5px, -7px); }
.wdw-category-card:hover::after { background: linear-gradient(180deg, #e3f590 0%, rgba(227, 245, 144, .98) 48%, rgba(227, 245, 144, .75) 65%, rgba(227, 245, 144, .06) 100%); }

.wdw-category-card__symbol {
  border-radius: 5px;
  box-shadow: 5px 5px 0 #d7f75d;
}

.wdw-topic-selector-card__image,
.wdw-topic-selector-card__illustration {
  isolation: isolate;
  display: grid;
  place-items: center;
  background:
    linear-gradient(#153b32 0 0) 28px 28px / 18px 18px no-repeat,
    linear-gradient(#d7f75d 0 0) calc(100% - 38px) 38px / 30px 30px no-repeat,
    linear-gradient(#8fc8b2 0 0) 46px calc(100% - 42px) / 24px 24px no-repeat,
    #dcebe5;
}

.wdw-topic-selector-card__image::after,
.wdw-topic-selector-card__illustration::after {
  z-index: 1;
  inset: 18px;
  border: 2px solid rgba(21, 59, 50, .18);
  background: none;
}

.wdw-topic-selector-card__image img,
.wdw-topic-selector-card__illustration > img {
  position: relative;
  z-index: 2;
  width: min(94%, 560px);
  height: auto;
  max-height: 480px;
  display: block;
  object-fit: contain;
  filter: none;
}

.wdw-topic-selector-card__image > span,
.wdw-topic-selector-card__illustration > em {
  z-index: 3;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #153b32;
}

@media (max-width: 980px) {
  .wdw-category-card { min-height: 390px; }
  .wdw-category-card::before { right: 0; bottom: 0; width: 46%; height: 96%; }
  .wdw-category-card::after { background: linear-gradient(90deg, #eef8c9 0%, rgba(238, 248, 201, .99) 48%, rgba(238, 248, 201, .76) 68%, rgba(238, 248, 201, .08) 100%); }
}

@media (max-width: 760px) {
  .wdw-device-switch {
    position: sticky;
    z-index: 100;
    top: 6px;
    margin-bottom: 16px;
    padding: 5px;
    gap: 4px;
    box-shadow: 5px 5px 0 #c7dc70;
  }

  .wdw-device-switch__item {
    min-height: 58px;
    padding: 6px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
  }

  .wdw-device-switch__item > i { width: 34px; height: 38px; }
  .wdw-device-switch__item > i::before { left: 6px; right: 6px; bottom: 5px; height: 18px; border-width: 2px; }
  .wdw-device-switch__item > strong { font-size: 12px; overflow-wrap: anywhere; }
  .wdw-device-switch__item > span { display: none; }
}

@media (max-width: 650px) {
  .wdw-category-grid { box-shadow: 6px 6px 0 #c7dc70; }
  .wdw-category-card { min-height: 455px; }
  .wdw-category-card::before { right: -11%; bottom: 35px; width: 78%; height: 55%; }
  .wdw-category-card::after { background: linear-gradient(180deg, #eef8c9 0%, rgba(238, 248, 201, .99) 53%, rgba(238, 248, 201, .69) 72%, rgba(238, 248, 201, .06) 100%); }
  .wdw-topic-selector-card__image,
  .wdw-topic-selector-card__illustration { min-height: 320px; }
  .wdw-topic-selector-card__image img,
  .wdw-topic-selector-card__illustration > img { width: min(94%, 350px); max-height: 300px; }
}

@media (max-width: 390px) {
  .wdw-device-switch__item { grid-template-columns: 1fr; justify-items: center; }
  .wdw-device-switch__item > i { display: none; }
  .wdw-device-switch__item > strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .wdw-device-switch__item,
  .wdw-category-card::before { transition-duration: .01ms !important; }
}

/* 0.15.1 — random, persistent category palettes. */
html[data-wdw-palette="lime"],
html[data-wdw-palette-pralka="lime"] .wdw-category-card--pralka,
html[data-wdw-palette-suszarki="lime"] .wdw-category-card--suszarki,
html[data-wdw-palette-zmywarki="lime"] .wdw-category-card--zmywarki,
.wdw-category-card[data-wdw-palette="lime"] {
  --wdw-palette-ink: #153b32;
  --wdw-palette-ink-2: #224b40;
  --wdw-palette-ink-rgb: 21, 59, 50;
  --wdw-palette-ink-soft: #45645c;
  --wdw-palette-paper: #f6f3ea;
  --wdw-palette-card: #fffdf8;
  --wdw-palette-line: #cbd8d1;
  --wdw-palette-base: #eef8c9;
  --wdw-palette-base-rgb: 238, 248, 201;
  --wdw-palette-hover: #e3f590;
  --wdw-palette-hover-rgb: 227, 245, 144;
  --wdw-palette-accent: #d7f75d;
  --wdw-palette-accent-rgb: 215, 247, 93;
  --wdw-palette-deep: #b9db3e;
  --wdw-palette-soft: #dcebe5;
  --wdw-palette-art: #8fc8b2;
}

html[data-wdw-palette="peach"],
html[data-wdw-palette-pralka="peach"] .wdw-category-card--pralka,
html[data-wdw-palette-suszarki="peach"] .wdw-category-card--suszarki,
html[data-wdw-palette-zmywarki="peach"] .wdw-category-card--zmywarki,
.wdw-category-card[data-wdw-palette="peach"] {
  --wdw-palette-ink: #4a2e27;
  --wdw-palette-ink-2: #643d31;
  --wdw-palette-ink-rgb: 74, 46, 39;
  --wdw-palette-ink-soft: #71554d;
  --wdw-palette-paper: #fbf3ed;
  --wdw-palette-card: #fffcf9;
  --wdw-palette-line: #dfc9bd;
  --wdw-palette-base: #ffe3d0;
  --wdw-palette-base-rgb: 255, 227, 208;
  --wdw-palette-hover: #ffd2b5;
  --wdw-palette-hover-rgb: 255, 210, 181;
  --wdw-palette-accent: #f5a36c;
  --wdw-palette-accent-rgb: 245, 163, 108;
  --wdw-palette-deep: #d9824f;
  --wdw-palette-soft: #f5ded1;
  --wdw-palette-art: #f5c2a1;
}

html[data-wdw-palette="sky"],
html[data-wdw-palette-pralka="sky"] .wdw-category-card--pralka,
html[data-wdw-palette-suszarki="sky"] .wdw-category-card--suszarki,
html[data-wdw-palette-zmywarki="sky"] .wdw-category-card--zmywarki,
.wdw-category-card[data-wdw-palette="sky"] {
  --wdw-palette-ink: #173a4d;
  --wdw-palette-ink-2: #214e64;
  --wdw-palette-ink-rgb: 23, 58, 77;
  --wdw-palette-ink-soft: #476777;
  --wdw-palette-paper: #f1f6f8;
  --wdw-palette-card: #fbfeff;
  --wdw-palette-line: #c4d8e1;
  --wdw-palette-base: #ddeeff;
  --wdw-palette-base-rgb: 221, 238, 255;
  --wdw-palette-hover: #c9e5ff;
  --wdw-palette-hover-rgb: 201, 229, 255;
  --wdw-palette-accent: #7cc6fe;
  --wdw-palette-accent-rgb: 124, 198, 254;
  --wdw-palette-deep: #4b9bd3;
  --wdw-palette-soft: #dcecf2;
  --wdw-palette-art: #9dd8e8;
}

html[data-wdw-palette="violet"],
html[data-wdw-palette-pralka="violet"] .wdw-category-card--pralka,
html[data-wdw-palette-suszarki="violet"] .wdw-category-card--suszarki,
html[data-wdw-palette-zmywarki="violet"] .wdw-category-card--zmywarki,
.wdw-category-card[data-wdw-palette="violet"] {
  --wdw-palette-ink: #2f3154;
  --wdw-palette-ink-2: #42456f;
  --wdw-palette-ink-rgb: 47, 49, 84;
  --wdw-palette-ink-soft: #5e6080;
  --wdw-palette-paper: #f6f3fa;
  --wdw-palette-card: #fefcff;
  --wdw-palette-line: #d3cde3;
  --wdw-palette-base: #eae3ff;
  --wdw-palette-base-rgb: 234, 227, 255;
  --wdw-palette-hover: #dcd1ff;
  --wdw-palette-hover-rgb: 220, 209, 255;
  --wdw-palette-accent: #b9a2ff;
  --wdw-palette-accent-rgb: 185, 162, 255;
  --wdw-palette-deep: #8d73db;
  --wdw-palette-soft: #e7e3f2;
  --wdw-palette-art: #cbbef5;
}

html[data-wdw-palette="rose"],
html[data-wdw-palette-pralka="rose"] .wdw-category-card--pralka,
html[data-wdw-palette-suszarki="rose"] .wdw-category-card--suszarki,
html[data-wdw-palette-zmywarki="rose"] .wdw-category-card--zmywarki,
.wdw-category-card[data-wdw-palette="rose"] {
  --wdw-palette-ink: #4b2938;
  --wdw-palette-ink-2: #64384a;
  --wdw-palette-ink-rgb: 75, 41, 56;
  --wdw-palette-ink-soft: #735664;
  --wdw-palette-paper: #fbf3f6;
  --wdw-palette-card: #fffcfd;
  --wdw-palette-line: #e1c7d0;
  --wdw-palette-base: #ffe0eb;
  --wdw-palette-base-rgb: 255, 224, 235;
  --wdw-palette-hover: #ffc9db;
  --wdw-palette-hover-rgb: 255, 201, 219;
  --wdw-palette-accent: #ff8fb1;
  --wdw-palette-accent-rgb: 255, 143, 177;
  --wdw-palette-deep: #d9668a;
  --wdw-palette-soft: #f5dfe7;
  --wdw-palette-art: #f1abc2;
}

html[data-wdw-palette="aqua"],
html[data-wdw-palette-pralka="aqua"] .wdw-category-card--pralka,
html[data-wdw-palette-suszarki="aqua"] .wdw-category-card--suszarki,
html[data-wdw-palette-zmywarki="aqua"] .wdw-category-card--zmywarki,
.wdw-category-card[data-wdw-palette="aqua"] {
  --wdw-palette-ink: #123f3b;
  --wdw-palette-ink-2: #1c5750;
  --wdw-palette-ink-rgb: 18, 63, 59;
  --wdw-palette-ink-soft: #416d68;
  --wdw-palette-paper: #f0f7f5;
  --wdw-palette-card: #fbfffe;
  --wdw-palette-line: #bedad3;
  --wdw-palette-base: #d8f5ed;
  --wdw-palette-base-rgb: 216, 245, 237;
  --wdw-palette-hover: #bff0e3;
  --wdw-palette-hover-rgb: 191, 240, 227;
  --wdw-palette-accent: #63d6ba;
  --wdw-palette-accent-rgb: 99, 214, 186;
  --wdw-palette-deep: #36a98f;
  --wdw-palette-soft: #dceee9;
  --wdw-palette-art: #91decc;
}

html[data-wdw-palette] {
  --wdw-ink: var(--wdw-palette-ink);
  --wdw-ink-soft: var(--wdw-palette-ink-soft);
  --wdw-paper: var(--wdw-palette-paper);
  --wdw-card: var(--wdw-palette-card);
  --wdw-line: var(--wdw-palette-line);
  --wdw-lime: var(--wdw-palette-accent);
  --wdw-lime-deep: var(--wdw-palette-deep);
  --wdw-hard-line: var(--wdw-palette-ink);
  --wdw-soft-green: var(--wdw-palette-soft);
  --wdw-lime-wash: var(--wdw-palette-base);
  --wdw-lime-glow: rgba(var(--wdw-palette-accent-rgb), .34);
  --wdw-pattern-ink: rgba(var(--wdw-palette-ink-rgb), .26);
}

html[data-wdw-palette] :is(
  .wdw-calculator,
  .wdw-hub,
  .wdw-context,
  .wdw-related,
  .wdw-search-answer,
  .wdw-topic-hub
) {
  --wdw-ink: var(--wdw-palette-ink);
  --wdw-ink-soft: var(--wdw-palette-ink-soft);
  --wdw-paper: var(--wdw-palette-paper);
  --wdw-card: var(--wdw-palette-card);
  --wdw-line: var(--wdw-palette-line);
  --wdw-lime: var(--wdw-palette-accent);
  --wdw-lime-deep: var(--wdw-palette-deep);
}

.wdw-category-card {
  --wdw-ink: var(--wdw-palette-ink, #153b32);
  --wdw-ink-soft: var(--wdw-palette-ink-soft, #45645c);
  --wdw-lime: var(--wdw-palette-accent, #d7f75d);
  --wdw-lime-deep: var(--wdw-palette-deep, #b9db3e);
  background-color: var(--wdw-palette-base, #eef8c9);
}

.wdw-category-card::after {
  background: linear-gradient(
    180deg,
    var(--wdw-palette-base, #eef8c9) 0%,
    rgba(var(--wdw-palette-base-rgb, 238, 248, 201), .99) 48%,
    rgba(var(--wdw-palette-base-rgb, 238, 248, 201), .78) 67%,
    rgba(var(--wdw-palette-base-rgb, 238, 248, 201), .07) 100%
  );
}

.wdw-category-card:hover { background-color: var(--wdw-palette-hover, #e3f590); }
.wdw-category-card:hover::after {
  background: linear-gradient(
    180deg,
    var(--wdw-palette-hover, #e3f590) 0%,
    rgba(var(--wdw-palette-hover-rgb, 227, 245, 144), .98) 48%,
    rgba(var(--wdw-palette-hover-rgb, 227, 245, 144), .74) 67%,
    rgba(var(--wdw-palette-hover-rgb, 227, 245, 144), .06) 100%
  );
}

.wdw-category-card > p { color: var(--wdw-palette-ink-soft, #45645c); }

html[data-wdw-palette] .wdw-topic-selector-card {
  border-color: var(--wdw-palette-ink);
  background: var(--wdw-palette-base);
}

html[data-wdw-palette] .wdw-topic-selector-card__image,
html[data-wdw-palette] .wdw-topic-selector-card__illustration {
  background:
    linear-gradient(var(--wdw-palette-ink) 0 0) 28px 28px / 18px 18px no-repeat,
    linear-gradient(var(--wdw-palette-accent) 0 0) calc(100% - 38px) 38px / 30px 30px no-repeat,
    linear-gradient(var(--wdw-palette-art) 0 0) 46px calc(100% - 42px) / 24px 24px no-repeat,
    var(--wdw-palette-soft);
}

html[data-wdw-palette] .wdw-topic-selector-card__image::after,
html[data-wdw-palette] .wdw-topic-selector-card__illustration::after {
  border-color: rgba(var(--wdw-palette-ink-rgb), .18);
}

html[data-wdw-palette] .wdw-topic-selector-card__image > span,
html[data-wdw-palette] .wdw-topic-selector-card__illustration > em {
  border-color: var(--wdw-palette-ink);
  background: var(--wdw-palette-accent);
  color: var(--wdw-palette-ink);
  box-shadow: 4px 4px 0 var(--wdw-palette-ink);
}

html[data-wdw-palette] .wdw-topic-path { background: var(--wdw-palette-soft); }
html[data-wdw-palette] .wdw-topic-kicker,
html[data-wdw-palette] .wdw-topic-path li > span,
html[data-wdw-palette] .wdw-topic-selector-card__content li::before { color: var(--wdw-palette-deep); }
html[data-wdw-palette] .wdw-button-primary:hover { background: var(--wdw-palette-hover); }

html[data-wdw-palette] .wdw-device-switch {
  border-color: var(--wdw-palette-ink);
  background: var(--wdw-palette-card);
  box-shadow: 7px 7px 0 var(--wdw-palette-deep);
}

html[data-wdw-palette] .wdw-device-switch__item {
  color: var(--wdw-palette-ink);
}

html[data-wdw-palette] .wdw-device-switch__item:hover {
  border-color: var(--wdw-palette-ink);
  background: var(--wdw-palette-base);
  color: var(--wdw-palette-ink);
}

html[data-wdw-palette] .wdw-device-switch__item:focus-visible { outline-color: var(--wdw-palette-ink); }
html[data-wdw-palette] .wdw-device-switch__item[aria-current="page"] {
  border-color: var(--wdw-palette-ink);
  background: var(--wdw-palette-ink);
  box-shadow: 4px 4px 0 var(--wdw-palette-accent);
}

html[data-wdw-palette] .wdw-device-switch__item > i { color: var(--wdw-palette-ink); }
html[data-wdw-palette] .wdw-device-switch__item > i::before { background: var(--wdw-palette-art); }
html[data-wdw-palette] .wdw-device-switch__item--dryer > i::before { background: var(--wdw-palette-accent); }
html[data-wdw-palette] .wdw-device-switch__item--dishwasher > i::before {
  background:
    linear-gradient(currentColor 0 0) 4px 6px / 22px 2px no-repeat,
    linear-gradient(currentColor 0 0) 4px 13px / 22px 2px no-repeat,
    var(--wdw-palette-soft);
}
html[data-wdw-palette] .wdw-device-switch__item > i > span { background: var(--wdw-palette-ink); }
html[data-wdw-palette] .wdw-device-switch__item[aria-current="page"] > i { background: var(--wdw-palette-accent); }
html[data-wdw-palette] .wdw-device-switch__item[aria-current="page"] > span {
  border-color: var(--wdw-palette-accent);
  background: var(--wdw-palette-accent);
  color: var(--wdw-palette-ink);
}

@media (min-width: 651px) and (max-width: 980px) {
  .wdw-category-card::after {
    background: linear-gradient(
      90deg,
      var(--wdw-palette-base, #eef8c9) 0%,
      rgba(var(--wdw-palette-base-rgb, 238, 248, 201), .99) 48%,
      rgba(var(--wdw-palette-base-rgb, 238, 248, 201), .76) 68%,
      rgba(var(--wdw-palette-base-rgb, 238, 248, 201), .08) 100%
    );
  }

  .wdw-category-card:hover::after {
    background: linear-gradient(
      90deg,
      var(--wdw-palette-hover, #e3f590) 0%,
      rgba(var(--wdw-palette-hover-rgb, 227, 245, 144), .98) 48%,
      rgba(var(--wdw-palette-hover-rgb, 227, 245, 144), .73) 68%,
      rgba(var(--wdw-palette-hover-rgb, 227, 245, 144), .06) 100%
    );
  }
}

@media (max-width: 760px) {
  html[data-wdw-palette] .wdw-device-switch { box-shadow: 5px 5px 0 var(--wdw-palette-deep); }
}