/* Native UI matching the reference proportions; standalone illustration + SVG/HTML labels. */
#odpady{
  --waste-u:calc(100cqi / 419);
  align-self:start;display:block;min-height:0;height:auto;
  padding:14px 12px 9px 13px;
  border:1px solid #40513f2b;border-radius:16px;
  background:linear-gradient(115deg,#17231e,#13201a);
  box-shadow:inset 0 1px 0 #d1e5ba09,0 4px 18px #061c1433;
}
#odpady .utility-heading{
  display:grid;grid-template-columns:40px minmax(0,1fr) 91px;
  column-gap:14px;row-gap:0;align-items:center;
  height:calc(60 * var(--waste-u));min-height:0;
  margin:0 0 calc(11 * var(--waste-u));
  grid-template-rows:calc(43 * var(--waste-u)) calc(17 * var(--waste-u));
}
#odpady .utility-emblem{
  grid-column:1;grid-row:1 / 3;width:40px;height:46px;
  align-self:start;margin-top:calc(3 * var(--waste-u));
  color:#e3efac;
  background:radial-gradient(ellipse,#96ce3540,transparent 68%);
  filter:drop-shadow(0 0 6px #a7df4c45);
}
#odpady .waste-emblem svg{width:calc(32 * var(--waste-u));height:calc(38 * var(--waste-u));stroke-width:1.8;transform:translateX(calc(2 * var(--waste-u)))}
#odpady .utility-heading h2{
  grid-column:2;grid-row:1;font:400 calc(28 * var(--waste-u))/1.1 Georgia,'Times New Roman',serif;
  letter-spacing:calc(-1 * var(--waste-u));white-space:nowrap;
  color:#f9fbf0;text-shadow:0 1px 2px #00190e55;transform:translateY(calc(-2 * var(--waste-u)));
}
#odpady .utility-heading p{
  grid-column:2 / -1;grid-row:2;align-self:center;
  margin:0;color:#d9e1d7;font:400 calc(12 * var(--waste-u))/1.4 Manrope,Arial,sans-serif;
  letter-spacing:-.15px;white-space:nowrap;transform:translateY(calc(-3 * var(--waste-u)));
}
#odpady .utility-more{
  grid-column:3;grid-row:1;display:flex;gap:11px;
  align-self:start;justify-content:center;
  height:calc(43 * var(--waste-u));min-height:0;width:100%;
  padding:0;border-radius:calc(14 * var(--waste-u));
  border:1px solid #b8c9ac80;
  background:linear-gradient(130deg,#c8d5ba14,#d0dec208);
  box-shadow:inset 0 0 0 2px #e1eac60b;
  font-size:calc(11 * var(--waste-u));font-weight:500;
  margin-top:calc(4 * var(--waste-u));
}
#odpady .utility-more>span{display:inline}
#odpady .utility-more svg{width:calc(13 * var(--waste-u));height:calc(13 * var(--waste-u))}
#odpady .bins-illustration{
  display:block;position:relative;width:100%;height:auto;aspect-ratio:419 / 104;
  margin:0 0 calc(4 * var(--waste-u));padding:0;border:0;
  overflow:hidden;border-radius:calc(13 * var(--waste-u));
  background:radial-gradient(ellipse at 50% 100%,#30492b33,transparent 70%),#071f16;box-shadow:none;
}
#odpady .bins-illustration>img{
  position:absolute;display:block;width:100%;height:auto;
  max-width:none;inset:calc(3 * var(--waste-u)) auto auto 0;
  object-fit:initial;filter:none;transform:none;transition:none;
}
#odpady .bins-illustration:hover>img{filter:none;transform:none}
#odpady .waste-bin-markers{position:absolute;inset:0;pointer-events:none;display:block}
#odpady .waste-bin-marker{
  position:absolute;top:45%;transform:translateX(-50%);width:20%;
  display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--waste-u));
  color:#fffceb;filter:drop-shadow(0 1px 1px #14301a44);
}
#odpady .waste-bin-marker:nth-child(1){left:13.5%}
#odpady .waste-bin-marker:nth-child(2){left:37.8%}
#odpady .waste-bin-marker:nth-child(3){left:62.1%}
#odpady .waste-bin-marker:nth-child(4){left:86.4%}
#odpady .waste-bin-marker>svg{width:calc(21 * var(--waste-u));height:calc(23 * var(--waste-u));stroke-width:1.8}
#odpady .waste-bin-marker>span{font:750 calc(10 * var(--waste-u))/1 Manrope,Arial,sans-serif;color:inherit;letter-spacing:0;text-align:center}
#odpady .utility-links{display:grid;grid-template-columns:1fr;gap:calc(3 * var(--waste-u));margin:0;align-content:start}
#odpady .utility-links>a,#odpady .utility-links>a.utility-primary{
  display:grid;grid-template-columns:calc(37 * var(--waste-u)) minmax(0,1fr) calc(13 * var(--waste-u));
  gap:calc(18 * var(--waste-u));align-items:center;
  height:calc(61 * var(--waste-u));min-height:0;
  padding:calc(8 * var(--waste-u)) calc(19 * var(--waste-u)) calc(8 * var(--waste-u)) calc(13 * var(--waste-u));
  border:1px solid #b9d0a655;border-radius:calc(12 * var(--waste-u));
  background:linear-gradient(115deg,#70916610,#c9e1bc03);
  box-shadow:inset 0 1px 0 #e3efcb08;
  transform:none;
}
#odpady .utility-icon,#odpady .utility-primary .utility-icon{
  display:grid;place-items:center;width:calc(37 * var(--waste-u));height:calc(36 * var(--waste-u));
  border:0;border-radius:0;background:none;box-shadow:none;color:#edf6e7;
}
#odpady .utility-icon svg{width:calc(30 * var(--waste-u));height:calc(31 * var(--waste-u));stroke-width:1.65}
#odpady .utility-icon svg.waste-action-icon{stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#f1f6e9}
#odpady .utility-copy{display:block;min-width:0}
#odpady .utility-copy strong{
  display:block;font:650 calc(14 * var(--waste-u))/1.3 Manrope,Arial,sans-serif;
  letter-spacing:-.35px;color:#f7fcf1;white-space:nowrap;
}
#odpady .utility-copy small{
  display:block;margin-top:calc(4 * var(--waste-u));
  font:400 calc(11 * var(--waste-u))/1.54545 Manrope,Arial,sans-serif;
  letter-spacing:-.3px;color:#d8e4d4;white-space:nowrap;
}
#odpady .row-arrow{position:static;transform:none;margin:0;width:calc(13 * var(--waste-u));height:calc(15 * var(--waste-u));color:#eff8e6}
#odpady .utility-links>a:hover,#odpady .utility-links>a.utility-primary:hover{
  transform:none;background:#c6e1ad12;border-color:#d7e6c482;
}
@container (max-width:390px){
  #odpady .utility-heading{grid-template-columns:calc(40 * var(--waste-u)) minmax(0,1fr) calc(91 * var(--waste-u));column-gap:calc(14 * var(--waste-u))}
  #odpady .utility-emblem{width:calc(40 * var(--waste-u));height:calc(46 * var(--waste-u))}
}
@media(max-width:550px){#odpady{padding:14px 12px 9px 13px}}