/* Spolocny obal */
#products .ps-cs-line {
  min-width: 0;
  max-width: 100%;
}

/* Kapacita a tlaciarne: dva stlpce */
#products .ps-cs-line .ps-cs-cells {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 116px !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 680px !important;
  min-width: 0 !important;
  flex: 1 1 580px !important;
}

/* Ak je pritomna iba jedna bunka */
#products .ps-cs-line .ps-cs-cells:not(
  :has(.ps-cs-original-capacity)
),
#products .ps-cs-line .ps-cs-cells:not(
  :has(.ps-cs-trigger)
) {
  grid-template-columns: minmax(0, 1fr) !important;
  width: auto !important;
  flex: 0 1 auto !important;
}

/* Kapacita */
#products .ps-cs-line .ps-cs-cells
> .ps-cs-original-capacity {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  container-type: normal !important;
}

#products .ps-cs-line .ps-cs-original-capacity
> .ps-capacity {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  grid-template-columns: 76px minmax(0, 1fr);
}

#products .ps-cs-line .ps-cs-original-capacity
> .ps-capacity > .ps-side {
  justify-content: center;
}

/* Tlacidlo: rovnaka vyska ako kapacita */
#products .ps-cs-line .ps-cs-cells
> .ps-cs-trigger {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 7px !important;
  border-radius: 14px;
  text-align: center !important;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.35;
}

#products .ps-cs-line .ps-cs-cells
> .ps-cs-trigger:only-child {
  grid-column: 1 !important;
  width: 116px !important;
  min-height: 74px !important;
}

/* Sada tonerov: styri farby vedla seba */
#products .ps-cs-line .ps-cs-original-capacity
.ps-capacity-content.ps-set-capacity {
  display: block;
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-capacities {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-capacity {
  min-width: 0;
  min-height: 104px;
  padding: 13px 4px 10px;
  border-top: 0 !important;
  border-right: 1px solid #e7e9ee !important;
  font-family: Inter, system-ui, -apple-system,
    "Segoe UI", Arial, sans-serif;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-capacity:last-child {
  border-right: 0 !important;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-name {
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.3;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-name span {
  display: block;
}

/* Cislo aj jednotka zostanu na jednom riadku */
#products .ps-cs-line .ps-cs-original-capacity
.ps-color-pages {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  width: auto;
  white-space: nowrap !important;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-pages .ps-page-number {
  flex: 0 0 auto;
  white-space: nowrap !important;
  font-size: inherit;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-pages .ps-page-label {
  flex: 0 0 auto;
  white-space: nowrap !important;
  font-size: 10px;
  letter-spacing: normal;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-color-coverage {
  margin-top: 8px;
  font-size: 10px;
}

#products .ps-cs-line .ps-cs-original-capacity
.ps-capacity-main {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Prisposobenie podla skutocnej sirky obalu */
#products .ps-cs-line {
  container-type: inline-size;
  container-name: ps-specs-row;
}

/* Menej miesta: farby 2 x 2, tlaciarne stale vedla */
@container ps-specs-row (max-width: 610px) {
  #products .ps-cs-line .ps-cs-original-capacity
  .ps-color-capacities {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #products .ps-cs-line .ps-cs-original-capacity
  .ps-color-capacity:nth-child(2n) {
    border-right: 0 !important;
  }

  #products .ps-cs-line .ps-cs-original-capacity
  .ps-color-capacity:nth-child(n + 3) {
    border-top: 1px solid #e7e9ee !important;
  }
}

/* Velmi uzky priestor: tlacidlo pod kapacitou */
@container ps-specs-row (max-width: 400px) {
  #products .ps-cs-line .ps-cs-cells {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #products .ps-cs-line .ps-cs-cells
  > .ps-cs-trigger {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex-direction: row !important;
    min-height: 54px !important;
  }

  #products .ps-cs-line .ps-cs-cells
  > .ps-cs-trigger:only-child {
    grid-row: 1 !important;
  }
}
@media (max-width: 767px) {

  /* Jeden produkt na celu dostupnu sirku */
  body.type-category #products {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.type-category #products > .product {
    float: none !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  body.type-category #products > .product > .p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  body.type-category #products .p-in,
  body.type-category #products .p-in-in,
  body.type-category #products .p-bottom {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Stitky sa mozu zalomit */
  body.type-category #products .flags-default {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  body.type-category #products .flags-default .flag {
    max-width: 100%;
    margin: 0 !important;
    white-space: normal !important;
  }

  /* Hodnotenie a nove bunky pod sebou */
  body.type-category #products .ps-cs-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  body.type-category #products .ps-cs-line > .ratings-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.type-category #products .ps-cs-line .ps-cs-cells {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  body.type-category #products .ps-cs-line .ps-cs-cells
  > .ps-cs-original-capacity {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Kompatibilita pod kapacitou */
  body.type-category #products .ps-cs-line .ps-cs-cells
  > .ps-cs-trigger {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    gap: 9px !important;
    padding: 10px !important;
  }

  body.type-category #products .ps-cs-line .ps-cs-cells
  > .ps-cs-trigger:only-child {
    grid-row: 1 !important;
    width: 100% !important;
  }

  /* Sada tonerov: dve farby v kazdom riadku */
  body.type-category #products .ps-cs-original-capacity
  .ps-color-capacities {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.type-category #products .ps-cs-original-capacity
  > .ps-capacity {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  body.type-category #products .ps-cs-original-capacity
  .ps-color-capacity {
    min-width: 0 !important;
    min-height: 98px !important;
    padding: 12px 4px 9px !important;
    border-right: 1px solid #e7e9ee !important;
  }

  body.type-category #products .ps-cs-original-capacity
  .ps-color-capacity:nth-child(2n) {
    border-right: 0 !important;
  }

  body.type-category #products .ps-cs-original-capacity
  .ps-color-capacity:nth-child(n + 3) {
    border-top: 1px solid #e7e9ee !important;
  }

  body.type-category #products .ps-cs-original-capacity
  .ps-color-pages {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    gap: 2px !important;
  }

  body.type-category #products .ps-cs-original-capacity
  .ps-page-label {
    font-size: 10px !important;
  }
}