/* Postershop - produktova stranka vliesovych fototapet (master PDP)
   Trieda .ps-pdp obaluje cely podrobny popis, kratky popis pouziva
   .ps-pdp-specs s ikonovymi kartami. Farby podla dizajnu Postershopu. */

.ps-pdp,
.ps-pdp-short {
  --ps-primary: #33078d;
  --ps-secondary: #ff5e04;
  --ps-tertiary: #e6defc;
  --ps-ink: #0f0f0f;
  --ps-muted: #475467;
  --ps-line: #e4e7ec;
}

/* ---------- hodnotenie obchodu pod nazvom produktu ---------- */
/* rovnake udaje ako .ps-top-rating v hlavicke, len uzsie - bez ramceka a s mensimi medzerami */
.ps-pdp-rating {
  display: inline-flex;
  margin: 0 0 12px;
  align-items: center;
  gap: 5px;
  color: #0f0f0f;
  font-family: brandon-grotesque, sans-serif;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.ps-pdp-rating:hover,
.ps-pdp-rating:focus-visible {
  text-decoration: none;
}

.ps-pdp-rating:hover .ps-pdp-rating__count,
.ps-pdp-rating:focus-visible .ps-pdp-rating__count {
  color: #33058d;
  text-decoration: underline;
}

.ps-pdp-rating__score {
  color: #33058d;
  font-size: 14px;
  font-weight: 700;
}

.ps-pdp-rating__stars {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1;
}

/* farby aj s -webkit-text-fill-color - sablona ho na odkazoch prebija */
.ps-pdp-rating .ps-pdp-rating__stars-base {
  color: #d8d1e4;
  -webkit-text-fill-color: #d8d1e4;
}

.ps-pdp-rating .ps-pdp-rating__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ps-rating-width, 96%);
  overflow: hidden;
  color: #ff9a2e;
  -webkit-text-fill-color: #ff9a2e;
  white-space: nowrap;
}

.ps-pdp-rating__count {
  color: #756b88;
  font-size: 12px;
  font-weight: 400;
}

/* ---------- kratky popis pod nazvom ---------- */

.ps-pdp-short__lead {
  margin: 0 0 14px;
  line-height: 1.55;
}

/* sablona farbi odseky v kratkom popise svetlosivou (#7c7e8f) pravidlom
   s vyssou specificitou - preto dva selektory */
.ps-pdp-short .ps-pdp-short__lead,
.ps-pdp-short .ps-pdp-short__lead strong {
  color: var(--ps-ink);
}

/* odstup od odkazu "Detailni informace" pod blokom;
   padding, nie margin - ten by sa zlial s marginom odkazu */
.ps-pdp-short {
  padding-bottom: 12px;
}

/* ikonove karty s klucovymi vlastnostami produktu */
.ps-pdp-specs {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.ps-pdp-specs li {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #efe7dd;
  border-radius: 14px;
  background: #fff;
  color: var(--ps-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  gap: 10px;
}

.ps-pdp-specs li::before {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background-color: var(--ps-tertiary);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 19px 19px;
  content: "";
}

/* popisok karty; <small> je nepovinny druhy riadok */
.ps-pdp-specs li > span {
  min-width: 0;
}

.ps-pdp-specs small {
  display: block;
  margin-top: 2px;
  color: var(--ps-muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.ps-pdp-specs--size::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209V3h6M21%209V3h-6M3%2015v6h6M21%2015v6h-6%22%2F%3E%3C%2Fsvg%3E"); }

.ps-pdp-specs--material::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/canvas.svg"); }

.ps-pdp-specs--surface::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/eye.svg"); }

.ps-pdp-specs--glue::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/glue.svg"); }


/* ---------- spolocna sada ikon (pouzitelna v .ps-pdp-specs aj .ps-pdp-pack) ---------- */

.ps-ico--hang::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.2a1.7%201.7%200%201%201%201.7%201.7c-1%200-1.7.7-1.7%201.7v1.6%22%2F%3E%3Cpath%20d%3D%22M12%208.2%204.4%2019.2a1%201%200%200%200%20.8%201.6h13.6a1%201%200%200%200%20.8-1.6L12%208.2Z%22%2F%3E%3C%2Fsvg%3E"); }

.ps-ico--frame::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.8%22%20y%3D%224.3%22%20width%3D%2218.4%22%20height%3D%2215.4%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%226.2%22%20y%3D%227.7%22%20width%3D%2211.6%22%20height%3D%228.6%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }

.ps-ico--edges::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.6%204.4h11a1.4%201.4%200%200%201%201.4%201.4v11a1.4%201.4%200%200%201-1.4%201.4h-11Z%22%2F%3E%3Cpath%20d%3D%22M8.6%204.4%203.4%207.2v11l5.2-2.8Z%22%2F%3E%3C%2Fsvg%3E"); }

.ps-ico--nosmell::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/eco.svg"); }

.ps-ico--uv::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/uv.svg"); }

.ps-ico--art::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.8%22%20y%3D%224.6%22%20width%3D%2218.4%22%20height%3D%2214.8%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M2.8%2016.2l4.6-4.2%203.4%203%203.6-4%206.8%206.2%22%2F%3E%3Ccircle%20cx%3D%228.4%22%20cy%3D%229%22%20r%3D%221.3%22%2F%3E%3C%2Fsvg%3E"); }

.ps-ico--box::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/box.svg"); }

.ps-ico--print::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/print.svg"); }

.ps-ico--canvas::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/canvas.svg"); }

/* ---------- podrobny popis ---------- */

.ps-pdp h2 {
  margin: 38px 0 14px;
  color: var(--ps-primary);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
}

.ps-pdp > h2:first-child {
  margin-top: 0;
}

.ps-pdp h3 {
  margin: 24px 0 8px;
  color: var(--ps-primary);
  font-size: 18px;
  line-height: 1.3;
}

.ps-pdp p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
}

.ps-pdp a {
  color: var(--ps-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ps-pdp a:hover {
  color: var(--ps-secondary);
}

/* ---------- blok "Ocko radi" ---------- */

.ps-pdp-tip {
  margin: 28px 0;
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--ps-tertiary);
}

.ps-pdp-tip h2,
.ps-pdp-tip h3 {
  margin: 0 0 10px;
}

.ps-pdp-tip p:last-child {
  margin-bottom: 0;
}

/* rozmerova schema */

.ps-pdp-dims {
  display: flex;
  max-width: 420px;
  height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 18px 0 0;
  border: 2px dashed var(--ps-primary);
  border-radius: 14px;
  background: #fff;
  color: var(--ps-primary);
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
}

/* len priame potomkov - vnutri nich su este <span data-ps-param> s hodnotou */
.ps-pdp-dims > span {
  display: block;
}

/* ---------- 4 kroky lepenia ---------- */

.ps-pdp-steps {
  display: grid;
  margin: 18px 0 20px;
  padding: 0;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  counter-reset: ps-step;
}

/* Tri kroky vedla seba, styri zostavaju 2x2. Pravidlo drzime za min-width:
   :has() ma vyssiu specificitu nez holy .ps-pdp-steps v mobilnom prepise,
   takze bez tejto zatvorky by tri kroky zostali v troch stlpcoch aj na telefone. */
@media (min-width: 576px) {
  .ps-pdp-steps:has(> li:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ps-pdp-steps li {
  padding: 20px 22px;
  border: 2px solid var(--ps-tertiary);
  border-radius: 18px;
  background: #fff;
  counter-increment: ps-step;
}

.ps-pdp-steps li::before {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--ps-primary);
  color: #fff;
  content: counter(ps-step);
  font-size: 15px;
  font-weight: 700;
}

.ps-pdp-steps strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ps-primary);
  font-size: 16px;
}

.ps-pdp-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- CTA odkaz ---------- */

.ps-pdp-cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 15px;
  background: var(--ps-secondary);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
}

.ps-pdp-cta:hover {
  background: #bd4500;
  color: #fff !important;
}

/* ---------- co najdete v baleni ---------- */

.ps-pdp-pack {
  display: grid;
  margin: 18px 0 0;
  padding: 0;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

/* Pocet stlpcov podla poctu poloziek, aby nezostavala osamotena karta.
   Rovnako ako pri krokoch - za min-width, inak :has() prebije mobilny prepis
   a pat poloziek sa na telefone natlaci do piatich 50 px stlpcov. */
@media (min-width: 768px) {
  .ps-pdp-pack:has(> li:nth-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ps-pdp-pack:has(> li:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* cislovanie len tam, kde je zoznam naozaj ocislovany (<ol>) */
ol.ps-pdp-pack {
  counter-reset: ps-pack;
}

.ps-pdp-pack li {
  position: relative;
  padding: 20px 12px;
  border-radius: 18px;
  background: #fdf7f1;
  color: var(--ps-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.ps-pdp-pack li::before {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background-color: var(--ps-tertiary);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  content: "";
}

/* poradove cislo v rohu karty - ::before uz patri ikone */
ol.ps-pdp-pack li {
  counter-increment: ps-pack;
}

ol.ps-pdp-pack li::after {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ps-primary);
  color: #fff;
  content: counter(ps-pack);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.ps-pdp-pack--roll::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/print.svg"); }

.ps-pdp-pack--parts::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.8%22%20y%3D%224%22%20width%3D%224.6%22%20height%3D%2216%22%20rx%3D%221.3%22%2F%3E%3Crect%20x%3D%229.7%22%20y%3D%224%22%20width%3D%224.6%22%20height%3D%2216%22%20rx%3D%221.3%22%2F%3E%3Crect%20x%3D%2216.6%22%20y%3D%224%22%20width%3D%224.6%22%20height%3D%2216%22%20rx%3D%221.3%22%2F%3E%3C%2Fsvg%3E"); }

.ps-pdp-pack--glue::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/glue.svg"); }

.ps-pdp-pack--manual::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%203h8.2l4.8%204.8V21H5.5z%22%2F%3E%3Cpath%20d%3D%22M13.5%203v5h5%22%2F%3E%3Cpath%20d%3D%22M8.6%2012.5h6.8M8.6%2016.2h4.6%22%2F%3E%3C%2Fsvg%3E"); }

/* ikony Postershopu bez starsieho ekvivalentu - pre buduce bloky */
.ps-ico--glue::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/glue.svg"); }
.ps-ico--install::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/install.svg"); }
.ps-ico--vlies::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/canvas.svg"); }
.ps-ico--eye::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/eye.svg"); }
.ps-ico--remove::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/remove.svg"); }
.ps-ico--eco::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/eco.svg"); }
.ps-ico--delivery::before { background-image: url("https://cdn.myshoptet.com/usr/www.postershop.cz/user/documents/postershop/icons/delivery.svg"); }

/* ikony od dizajnera maju vlastny ramcek s vnutornym okrajom - vyplnaju cely kruh,
   kresba tak sedi v kruhu rovnako ako v dizajne.
   Zdvojena trieda prebije velkost z ".ps-pdp-specs li::before" aj z mobilnych media queries. */
.ps-pdp-specs--material.ps-pdp-specs--material::before,
.ps-pdp-specs--surface.ps-pdp-specs--surface::before,
.ps-pdp-specs--glue.ps-pdp-specs--glue::before,
.ps-pdp-pack--roll.ps-pdp-pack--roll::before,
.ps-pdp-pack--glue.ps-pdp-pack--glue::before,
.ps-ico--nosmell.ps-ico--nosmell::before,
.ps-ico--uv.ps-ico--uv::before,
.ps-ico--box.ps-ico--box::before,
.ps-ico--print.ps-ico--print::before,
.ps-ico--canvas.ps-ico--canvas::before,
.ps-ico--glue.ps-ico--glue::before,
.ps-ico--install.ps-ico--install::before,
.ps-ico--vlies.ps-ico--vlies::before,
.ps-ico--eye.ps-ico--eye::before,
.ps-ico--remove.ps-ico--remove::before,
.ps-ico--eco.ps-ico--eco::before,
.ps-ico--delivery.ps-ico--delivery::before {
  background-size: 108% 108%;
}

/* obrazy pouzivaju v popise triedy fototapiet s inym vyznamom (lepidlo = zaves,
   navod = hrany...) - na obrazoch preto ikony podla skutocneho textu karty */
.in-obrazy .ps-pdp-specs--surface.ps-pdp-specs--surface::before,
.in-obrazy .ps-pdp-pack--manual.ps-pdp-pack--manual::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.6%204.4h11a1.4%201.4%200%200%201%201.4%201.4v11a1.4%201.4%200%200%201-1.4%201.4h-11Z%22%2F%3E%3Cpath%20d%3D%22M8.6%204.4%203.4%207.2v11l5.2-2.8Z%22%2F%3E%3C%2Fsvg%3E"); }

.in-obrazy .ps-pdp-specs--glue.ps-pdp-specs--glue::before,
.in-obrazy .ps-pdp-pack--glue.ps-pdp-pack--glue::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.2a1.7%201.7%200%201%201%201.7%201.7c-1%200-1.7.7-1.7%201.7v1.6%22%2F%3E%3Cpath%20d%3D%22M12%208.2%204.4%2019.2a1%201%200%200%200%20.8%201.6h13.6a1%201%200%200%200%20.8-1.6L12%208.2Z%22%2F%3E%3C%2Fsvg%3E"); }

.in-obrazy .ps-pdp-pack--roll.ps-pdp-pack--roll::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333078d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.8%22%20y%3D%224.6%22%20width%3D%2218.4%22%20height%3D%2214.8%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M2.8%2016.2l4.6-4.2%203.4%203%203.6-4%206.8%206.2%22%2F%3E%3Ccircle%20cx%3D%228.4%22%20cy%3D%229%22%20r%3D%221.3%22%2F%3E%3C%2Fsvg%3E"); }

/* stare ikony maju viewBox bez okraja - mensia velkost ako v povodnych pravidlach */
.in-obrazy .ps-pdp-specs--surface.ps-pdp-specs--surface::before,
.in-obrazy .ps-pdp-specs--glue.ps-pdp-specs--glue::before,
.in-obrazy .ps-pdp-pack--roll.ps-pdp-pack--roll::before,
.in-obrazy .ps-pdp-pack--glue.ps-pdp-pack--glue::before {
  background-size: 54% 54%;
}

/* ---------- porovnavacia tabulka ---------- */

.ps-pdp-compare {
  overflow-x: auto;
  margin: 20px 0 10px;
}

.ps-pdp-compare table {
  width: 100%;
  min-width: 460px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}

.ps-pdp-compare th,
.ps-pdp-compare td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
}

.ps-pdp-compare thead th {
  color: var(--ps-muted);
  font-size: 14px;
  font-weight: 700;
}

/* linky len mimo vyzdvihnuteho stlpca, nech ten drzi ako jeden celok */
.ps-pdp-compare thead th:first-child,
.ps-pdp-compare thead th:last-child {
  border-bottom: 1px solid var(--ps-line);
}

.ps-pdp-compare tbody th,
.ps-pdp-compare tbody td:last-child {
  border-bottom: 1px solid var(--ps-line);
}

.ps-pdp-compare tbody th {
  width: 36%;
  color: var(--ps-ink);
  font-weight: 600;
}

.ps-pdp-compare tbody td:last-child {
  color: var(--ps-muted);
}

/* --- vyzdvihnuty stlpec vliesovej fototapety --- */
.ps-pdp-compare thead th:nth-child(2) {
  border-radius: 14px 14px 0 0;
  background: var(--ps-primary);
  color: #fff;
  font-size: 15px;
}

.ps-pdp-compare thead th:nth-child(2) span {
  display: block;
  margin-top: 3px;
  color: var(--ps-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.ps-pdp-compare tbody td:nth-child(2) {
  background: #f4f0ff;
  color: var(--ps-primary);
  font-weight: 700;
}

.ps-pdp-compare tbody tr:last-child td:nth-child(2) {
  border-radius: 0 0 14px 14px;
}

.ps-pdp-compare tbody td:nth-child(2)::before {
  margin-right: 8px;
  color: #3f8618;
  content: "✓";
  font-weight: 700;
}

.ps-pdp-note {
  color: var(--ps-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* zaverecny odkaz na clanky - odsadenie od poslednej FAQ polozky.
   Poznamka pod porovnavacou tabulkou ma zostat tesne pri nej, preto :last-child */
.ps-pdp > .ps-pdp-note:last-child {
  margin-top: 28px;
}

/* ---------- porovnanie velkosti so sedackou ---------- */

.ps-pdp-scale {
  margin: 20px 0 0;
  padding: 22px 24px;
  border-radius: 18px;
  background: #fdf7f1;
}

.ps-pdp-scale__row {
  position: relative;
  height: 46px;
  margin-bottom: 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-pdp-scale__row:last-child {
  margin-bottom: 0;
}

/* referencna sedacka 240 cm = plna sirka */
.ps-pdp-scale__sofa {
  width: 100%;
  border: 2px solid #d9cfc4;
  background: #fff;
  color: var(--ps-muted);
}

/* obraz - sirka v pomere k 240 cm sedacke */
.ps-pdp-scale__art {
  background: var(--ps-primary);
  color: #fff;
}

.ps-pdp-scale__art--40 { width: 16.7%; }

.ps-pdp-scale__art--60 { width: 25%; }

.ps-pdp-scale__art--100 { width: 41.7%; }

.ps-pdp-scale__art--145 { width: 60.4%; }

/* pri uzkych formatoch by sa popis nezmestil dovnutra */
.ps-pdp-scale__art--40,
.ps-pdp-scale__art--60 {
  overflow: visible;
}

.ps-pdp-scale__art--40 span,
.ps-pdp-scale__art--60 span {
  position: absolute;
  left: calc(100% + 10px);
  color: var(--ps-primary);
}

/* referencna fotka porovnania velkosti */
.ps-pdp-scale-photo {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 18px 0 0;
  border-radius: 16px;
}

/* ---------- fakticky riadok pod blokom ---------- */

.ps-pdp-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 0;
  gap: 10px 22px;
  list-style: none;
}

.ps-pdp-facts li {
  display: flex;
  align-items: center;
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  line-height: 1.3;
}

.ps-pdp-facts li::before {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background-color: var(--ps-tertiary);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  content: "";
}

/* ---------- FAQ ---------- */

/* vlastny odstup a linka - na nadpis vnutri sa chyta pravidlo sablony
   pre prvy nadpis v bloku, ktore by mu horny margin vynulovalo */
.ps-pdp-faq {
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--ps-line);
}

/* rozklikavacie boxy - bez JS, obsah zostava v DOM kvoli SEO */
.ps-pdp-faq__item {
  margin: 0 0 8px;
  border: 1px solid var(--ps-line);
  border-radius: 14px;
  background: #fff;
}

.ps-pdp-faq__item[open] {
  border-color: var(--ps-tertiary);
}

.ps-pdp-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  color: var(--ps-primary);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  gap: 16px;
  line-height: 1.35;
  list-style: none;
}

.ps-pdp-faq__item summary::-webkit-details-marker {
  display: none;
}

.ps-pdp-faq__item summary:hover {
  color: var(--ps-secondary);
}

/* sipka z dvoch okrajov - otoci sa pri rozbaleni */
.ps-pdp-faq__item summary::after {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 2px solid var(--ps-secondary);
  border-bottom: 2px solid var(--ps-secondary);
  margin-bottom: 3px;
  content: "";
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.ps-pdp-faq__item[open] summary::after {
  margin-bottom: 0;
  transform: rotate(-135deg);
}

.ps-pdp-faq__item p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 15px;
}

@media (max-width: 767px) {
  .ps-pdp-pack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  /* karty drzime 2x2 aj na telefone - v jednom stlpci zabrali 228 px.
     Miesto stlpca zmensujeme ikonu a pismo, nie pocet stlpcov. */
  .ps-pdp-specs li {
    padding: 10px;
    font-size: 12px;
    gap: 8px;
  }

  .ps-pdp-specs li::before {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    background-size: 17px 17px;
  }

  .ps-pdp-specs small {
    font-size: 10px;
  }

  /* Kroky pod sebou. Cislo dvihame do laveho horneho rohu a text ide vedla
     neho - karta tak nie je o riadok vyssia len kvoli kolecku. */
  .ps-pdp-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ps-pdp-steps li {
    position: relative;
    padding: 14px 16px 14px 52px;
  }

  .ps-pdp-steps li::before {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 26px;
    height: 26px;
    margin-bottom: 0;
    font-size: 13px;
  }

  .ps-pdp-steps strong {
    font-size: 15px;
  }

  /* Karty balenia zostavaju dve vedla seba, len su utiahnutejsie.
     Pri neparnom pocte roztiahneme poslednu cez oba stlpce, nech
     nezostane visiet sama v polovici riadku. */
  .ps-pdp-pack {
    gap: 8px;
  }

  .ps-pdp-pack li {
    padding: 16px 10px;
    font-size: 13px;
  }

  .ps-pdp-pack li::before {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    background-size: 24px 24px;
  }

  .ps-pdp-pack:has(> li:nth-child(odd):last-child) > li:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-column: 1 / -1;
  }

  /* roztiahnuta karta je nizka, tak ikonu davame vedla textu a nie nad neho */
  .ps-pdp-pack:has(> li:nth-child(odd):last-child) > li:last-child::before {
    margin: 0;
  }

  .ps-pdp-tip {
    padding: 20px 18px;
    border-radius: 18px;
  }

  .ps-pdp-dims {
    height: 130px;
  }

  .ps-pdp p {
    font-size: 15px;
  }
}