/*
 * Ateliér knihy – parametre a farby, šablóna Pop (template-04).
 * Verzia 1 – 22. 9. 2026.
 * Nahrádza dnešné bloky atk-pop-filters, atk-pop-color-swatches,
 * atk-pop-copper-swatch, atk-pop-transparent-swatch, atk-color-hide-bestsellers
 * a samostatný dodatok pre dva stĺpce na mobile.
 */

/* 1. Doterajšie nastavenie filtrov na celom e-shope. */
body.template-04 #category-filter,
body.template-04 .category-filter-manufacturers,
body.template-04 #manufacturer-filter,
body.template-04 #param-filter-actual-button {
  display: none !important;
}

body.template-04 #category-filter-hover {
  display: block !important;
  height: auto !important;
  margin: 20px 0 0 !important;
}

body.template-04 #category-filter-hover:not(:has(.param-filter-single:not(#manufacturer-filter), #clear-filters)) {
  display: none !important;
}

body.template-04 #category-filter-hover-content {
  padding: 16px !important;
}

/* 2. Nasledujúce úpravy platia iba pre Materiály podľa farby, parameter Farba. */
body.template-04.id-1278 #category-top10 {
  display: none !important;
}

body.template-04.id-1278 .param-filter-single-id-135,
body.template-04.id-1278 .param-filter-single-id-135 > form {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
}

body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 4px 12px;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0;
  padding: 0;
}

body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter > strong {
  order: -1;
  grid-column: 1 / -1;
  margin-bottom: 6px;
}

body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter > br,
body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter::before,
body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter::after {
  display: none !important;
}

body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell {
  display: block !important;
  float: none !important;
  clear: none !important;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Nová, zatiaľ neuvedená farba sa zobrazí za známymi farbami. */
  order: var(--atk-color-order, 100);
}

body.template-04.id-1278 .param-filter-single-id-135 label {
  display: inline-flex !important;
  box-sizing: border-box;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal !important;
  overflow-wrap: anywhere;
  cursor: pointer;
}

body.template-04.id-1278 .param-filter-single-id-135 label > input[type="checkbox"] {
  order: -2;
  flex: 0 0 auto;
  margin: 0 !important;
}

body.template-04.id-1278 .param-filter-single-id-135 label::before {
  /* Aj neznáma nová farba má vyhradené miesto pre neskoršie doplnenie odtieňa. */
  content: var(--atk-chip-content, "");
  order: -1;
  display: inline-block;
  flex: 0 0 22px;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 1px solid #929292;
  border-radius: 2px;
  background: var(--atk-chip-fill, transparent);
  pointer-events: none;
}

body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter-cell-count {
  white-space: nowrap;
}

/* 3. Tablet a mobil. Na mobile vždy dva stĺpce a vzorky 30 × 30 px. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.template-04.id-1278 .param-filter-single-id-135 label {
    display: grid !important;
    grid-template-columns: 16px 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 4px;
    row-gap: 0;
    min-height: 56px;
  }

  body.template-04.id-1278 .param-filter-single-id-135 label > input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 16px;
    height: 16px;
  }

  body.template-04.id-1278 .param-filter-single-id-135 label::before {
    grid-column: 2;
    grid-row: 1 / 3;
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter-cell-count {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    font-size: 12px;
    line-height: 1.2;
    color: #666666;
  }
}

@media (max-width: 359px) {
  body.template-04.id-1278 .param-filter-single-id-135 .parametric-filter {
    column-gap: 8px;
  }
  body.template-04.id-1278 .param-filter-single-id-135 label {
    font-size: 13px;
  }
}

/* 4. Odtiene a poradie: neutrálne, pestré, kovové, ostatné.
 * Pri úprave odtieňa zmeňte --atk-chip-fill.
 * Pri úprave poradia zmeňte --atk-color-order.
 * Pravidlá sa automaticky uplatnia aj po obnovení filtra Shoptetom.
 */
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Biela"]) {
  --atk-color-order: 1; --atk-chip-content: ""; --atk-chip-fill: #ffffff;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Krémová"]) {
  --atk-color-order: 2; --atk-chip-content: ""; --atk-chip-fill: #fff2d5;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Béžová"]) {
  --atk-color-order: 3; --atk-chip-content: ""; --atk-chip-fill: #cdb58d;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Hnedá"]) {
  --atk-color-order: 4; --atk-chip-content: ""; --atk-chip-fill: #805032;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Sivá"]) {
  --atk-color-order: 5; --atk-chip-content: ""; --atk-chip-fill: #909090;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Čierna"]) {
  --atk-color-order: 6; --atk-chip-content: ""; --atk-chip-fill: #202020;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Žltá"]) {
  --atk-color-order: 7; --atk-chip-content: ""; --atk-chip-fill: #f4cf32;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Oranžová"]) {
  --atk-color-order: 8; --atk-chip-content: ""; --atk-chip-fill: #ed812b;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Červená"]) {
  --atk-color-order: 9; --atk-chip-content: ""; --atk-chip-fill: #c93237;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Bordová"]) {
  --atk-color-order: 10; --atk-chip-content: ""; --atk-chip-fill: #792d43;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Ružová"]) {
  --atk-color-order: 11; --atk-chip-content: ""; --atk-chip-fill: #e994b4;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Fialová"]) {
  --atk-color-order: 12; --atk-chip-content: ""; --atk-chip-fill: #80519b;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Modrá"]) {
  --atk-color-order: 13; --atk-chip-content: ""; --atk-chip-fill: #326bb4;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Tyrkys"]),
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Tyrkysová"]) {
  --atk-color-order: 14; --atk-chip-content: ""; --atk-chip-fill: #27aaa8;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Zelená"]) {
  --atk-color-order: 15; --atk-chip-content: ""; --atk-chip-fill: #538553;
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Zlatá"]) {
  --atk-color-order: 16; --atk-chip-content: ""; --atk-chip-fill: linear-gradient(135deg, #b88624, #f1d988, #b88624);
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Strieborná"]) {
  --atk-color-order: 17; --atk-chip-content: ""; --atk-chip-fill: linear-gradient(135deg, #a3a6aa, #f0f1f2, #a3a6aa);
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Medená"]) {
  --atk-color-order: 18; --atk-chip-content: ""; --atk-chip-fill: linear-gradient(135deg, #a75c36, #e7b08b, #a75c36);
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Viacfarebná"]) {
  --atk-color-order: 19; --atk-chip-content: ""; --atk-chip-fill: conic-gradient(#c93237 0deg 60deg, #ed812b 60deg 120deg, #f4cf32 120deg 180deg, #538553 180deg 240deg, #326bb4 240deg 300deg, #80519b 300deg 360deg);
}
body.template-04.id-1278 .param-filter-single-id-135 .param-filter-single-cell:has(input[value="Priehľadná"]) {
  --atk-color-order: 20; --atk-chip-content: ""; --atk-chip-fill: repeating-conic-gradient(#ffffff 0% 25%, #dedede 0% 50%) 0 0 / 10px 10px;
}